NextJSテンプレート
Next.js、Vercel、Back4Appを使用したチケッティングアプリの構築

29min
このチュートリアルでは、 Ticketing System を Next.js とアプリルーターを使用して、 Back4App をバックエンドサービスとして、 Tailwind CSS をスタイリングに使用します。このアプリでは、ユーザーがチケットを作成、更新、表示、削除できるようにし、データベース管理には Parse Server をBack4App上で利用します。
1. 前提条件
始める前に、次のものを用意してください:
Node.js があなたのマシンにインストールされていること (Node.js インストールガイド)。
Back4App アカウント (無料でサインアップ)。
Vercel デプロイ用のアカウント (Vercelにサインアップ)。
2. Back4Appの設定
Back4Appのダッシュボードにログインし、新しいプロジェクトを作成します。
「Data Browser」に移動し、次のスキーマで「Ticket」という新しいクラスを作成します:
フィールド名
タイプ
タイトル
文字列
説明
文字列
カテゴリ
文字列
優先順位
番号
進捗
番号
ステータス
文字列
作成日時
日付（自動生成）
更新日時
日付     （自動生成）
3. フロントエンドの設定 (Next.js)
3.1 新しい Next.js プロジェクトを作成する
次のコマンドを実行して新しい Next.js プロジェクトを作成します:
Bash
npx create-next-app@latest ticketing-app
cd ticketing-app
npx create-next-app@latest ticketing-app
cd ticketing-app
﻿
3.2 依存関係のインストール
インストール Tailwind CSS, Font Awesome, と Parse SDK をバックエンド操作のために:
Bash
npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome-free parse
npx tailwindcss init -p
npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome-free parse
npx tailwindcss init -p
﻿
3.3 Tailwind CSSのセットアップ
次の tailwind.config.js ファイルを編集して、Tailwind CSSのコンテンツパスを設定します:
JS
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
﻿
次に styles/globals.css, Tailwindのインポートを追加します:
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
﻿
3.4 プロジェクト構造の作成
提供された構造に従って、必要なディレクトリとコンポーネントを作成します。
ディレクトリ構造:
Text
/app
  /tickets
    /[id]
      page.js
  layout.js
  page.js
/components
  DeleteBlock.jsx
  Nav.jsx
  PriorityDisplay.jsx
  ProgressDisplay.jsx
  StatusDisplay.jsx
  TicketCard.jsx
  TicketForm.jsx
/lib
  parseClient.js
/app
  /tickets
    /[id]
      page.js
  layout.js
  page.js
/components
  DeleteBlock.jsx
  Nav.jsx
  PriorityDisplay.jsx
  ProgressDisplay.jsx
  StatusDisplay.jsx
  TicketCard.jsx
  TicketForm.jsx
/lib
  parseClient.js
﻿
4. Parseクライアントの設定
「/lib」フォルダーに、Parse SDKを設定するための「parseClient.js」ファイルを作成します。
JS
import Parse from 'parse';

// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JS_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
import Parse from 'parse';

// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JS_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
「'YOUR_APP_ID'」と「'YOUR_JS_KEY'」をあなたのBack4Appプロジェクトの資格情報に置き換えます。
5. 主要コンポーネントの作成
5.1 TicketForm
このコンポーネントは、「作成」と「更新」の両方のチケットを処理します。
「/components/TicketForm.jsx」に、次のものを作成します:
JS
import { useState } from 'react';
import Parse from '../lib/parseClient';

export default function TicketForm({ ticket }) {
  const [title, setTitle] = useState(ticket?.title || '');
  const [description, setDescription] = useState(ticket?.description || '');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Ticket = Parse.Object.extend('Ticket');
    const newTicket = ticket || new Ticket();
    newTicket.set('title', title);
    newTicket.set('description', description);

    try {
      await newTicket.save();
      alert('Ticket saved successfully!');
    } catch (error) {
      console.error('Error saving ticket:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
        required
      />
      <textarea
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        placeholder="Description"
        required
      />
      <button type="submit">Save Ticket</button>
    </form>
  );
}
import { useState } from 'react';
import Parse from '../lib/parseClient';

export default function TicketForm({ ticket }) {
  const [title, setTitle] = useState(ticket?.title || '');
  const [description, setDescription] = useState(ticket?.description || '');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Ticket = Parse.Object.extend('Ticket');
    const newTicket = ticket || new Ticket();
    newTicket.set('title', title);
    newTicket.set('description', description);

    try {
      await newTicket.save();
      alert('Ticket saved successfully!');
    } catch (error) {
      console.error('Error saving ticket:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
        required
      />
      <textarea
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        placeholder="Description"
        required
      />
      <button type="submit">Save Ticket</button>
    </form>
  );
}
﻿
5.2 TicketCard
このコンポーネントは、個々のチケット情報を表示します。
に /components/TicketCard.jsx:
JS
import Link from 'next/link';
import ProgressDisplay from './ProgressDisplay';

export default function TicketCard({ ticket }) {
  return (
    <div className="border p-4">
      <h2>{ticket.title}</h2>
      <p>{ticket.description}</p>
      <ProgressDisplay progress={ticket.progress} />
      <Link href={`/tickets/${ticket.objectId}`}>Edit</Link>
    </div>
  );
}
import Link from 'next/link';
import ProgressDisplay from './ProgressDisplay';

export default function TicketCard({ ticket }) {
  return (
    <div className="border p-4">
      <h2>{ticket.title}</h2>
      <p>{ticket.description}</p>
      <ProgressDisplay progress={ticket.progress} />
      <Link href={`/tickets/${ticket.objectId}`}>Edit</Link>
    </div>
  );
}
﻿
5.3 DeleteBlock
チケットを削除するための確認コンポーネント:
に /components/DeleteBlock.jsx:
JS
import Parse from '../lib/parseClient';

export default function DeleteBlock({ ticketId, onDelete }) {
  const handleDelete = async () => {
    const query = new Parse.Query('Ticket');
    const ticket = await query.get(ticketId);

    try {
      await ticket.destroy();
      alert('Ticket deleted successfully');
      onDelete();
    } catch (error) {
      console.error('Error deleting ticket:', error);
    }
  };

  return (
    <button onClick={handleDelete}>Delete Ticket</button>
  );
}
import Parse from '../lib/parseClient';

export default function DeleteBlock({ ticketId, onDelete }) {
  const handleDelete = async () => {
    const query = new Parse.Query('Ticket');
    const ticket = await query.get(ticketId);

    try {
      await ticket.destroy();
      alert('Ticket deleted successfully');
      onDelete();
    } catch (error) {
      console.error('Error deleting ticket:', error);
    }
  };

  return (
    <button onClick={handleDelete}>Delete Ticket</button>
  );
}
﻿
5.4 ProgressDisplay
このコンポーネントは、進捗をパーセンテージバーとして表示します:
に /components/ProgressDisplay.jsx:
JS
export default function ProgressDisplay({ progress }) {
  return (
    <div>
      <div className="w-full bg-gray-200 rounded">
        <div
          className="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded"
          style={{ width: `${progress}%` }}
        >
          {progress}%
        </div>
      </div>
    </div>
  );
}
export default function ProgressDisplay({ progress }) {
  return (
    <div>
      <div className="w-full bg-gray-200 rounded">
        <div
          className="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded"
          style={{ width: `${progress}%` }}
        >
          {progress}%
        </div>
      </div>
    </div>
  );
}
﻿
5.4 ProgressDisplay
6. ページとルーティング
6.1 チケットのリスト
に /app/page.js, チケットのリストを表示します:
JS
import { useEffect, useState } from 'react';
import Parse from '../lib/parseClient';
import TicketCard from '../components/TicketCard';

export default function Home() {
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    const fetchTickets = async () => {
      const query = new Parse.Query('Ticket');
      const results = await query.find();
      setTickets(results);
    };
    fetchTickets();
  }, []);

  return (
    <div>
      <h1>Tickets</h1>
      {tickets.map(ticket => (
        <TicketCard key={ticket.id} ticket={ticket} />
      ))}
    </div>
  );
}
import { useEffect, useState } from 'react';
import Parse from '../lib/parseClient';
import TicketCard from '../components/TicketCard';

export default function Home() {
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    const fetchTickets = async () => {
      const query = new Parse.Query('Ticket');
      const results = await query.find();
      setTickets(results);
    };
    fetchTickets();
  }, []);

  return (
    <div>
      <h1>Tickets</h1>
      {tickets.map(ticket => (
        <TicketCard key={ticket.id} ticket={ticket} />
      ))}
    </div>
  );
}
﻿
6.2 チケットの詳細と編集
に /app/tickets/[id]/page.js:
JS
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Parse from '../../../lib/parseClient';
import TicketForm from '../../../components/TicketForm';
import DeleteBlock from '../../../components/DeleteBlock';

export default function TicketDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [ticket, setTicket] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchTicket = async () => {
      const query = new Parse.Query('Ticket');
      const result = await query.get(id);
      setTicket(result);
    };
    fetchTicket();
  }, [id]);

  const handleDelete = () => {
    router.push('/');
  };

  if (!ticket) return <div>Loading...</div>;

  return (
    <div>
      <TicketForm ticket={ticket} />
      <DeleteBlock ticketId={ticket.id} onDelete={handleDelete} />
    </div>
  );
}
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Parse from '../../../lib/parseClient';
import TicketForm from '../../../components/TicketForm';
import DeleteBlock from '../../../components/DeleteBlock';

export default function TicketDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [ticket, setTicket] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchTicket = async () => {
      const query = new Parse.Query('Ticket');
      const result = await query.get(id);
      setTicket(result);
    };
    fetchTicket();
  }, [id]);

  const handleDelete = () => {
    router.push('/');
  };

  if (!ticket) return <div>Loading...</div>;

  return (
    <div>
      <TicketForm ticket={ticket} />
      <DeleteBlock ticketId={ticket.id} onDelete={handleDelete} />
    </div>
  );
}
﻿
7. Vercelへのデプロイ 
7.1: Vercelアカウントの作成
Vercelアカウントをまだ持っていない場合は、次のリンクにアクセスして vercel.com でアカウントを作成してください。
GitHub、GitLab、またはBitbucketでサインアップできます。Vercelは、デプロイのためにリポジトリを直接リンクするのを簡単にします。
7.2: コードをGitHubにプッシュする
Vercelにアプリをデプロイするには、プロジェクトを GitHub (またはGitLab/Bitbucket) のようなバージョン管理プラットフォームにホストする必要があります。
プロジェクトがまだGitHubにない場合は、次の手順に従ってください:
プロジェクトディレクトリでgitを初期化します:
bashCopy codegit init
プロジェクトをGitHubに追加します:
bashCopy codegit add .
git commit -m "初回コミット"
git branch -M main
git remote add origin https://github.com/YOUR_GITHUB_USERNAME/ticketing-app.git
git push -u origin main
7.3: Vercel CLIをインストールする（オプション） 
コマンドラインから直接デプロイすることを好む場合は、 Vercel CLI をグローバルにインストールします:
bashCopy codenpm install -g vercel
または、次に説明するVercelのダッシュボードを介してデプロイすることもできます。
7.4: GitHubリポジトリをVercelに接続する
に行く Vercel.
クリック 新しいプロジェクト.
あなたのNext.jsプロジェクトを含むGitリポジトリを選択します。
プロジェクトを設定します:
Vercelは自動的にそれが Next.js プロジェクトであることを検出し、正しいビルド設定を適用します。
を設定します ルートディレクトリ プロジェクトのフォルダーに（必要に応じて）。
7.5: 環境変数を設定する 
あなたの Back4Appの資格情報 とVercelの他の環境変数を設定する必要があります。
Vercelの プロジェクト設定, 環境変数 セクションに移動します。
次の環境変数を追加します:
7.6: .env.localでParse設定を行う（オプション）
開発中にローカル環境変数を使用する場合は、次の変数を含む.env.localファイルをプロジェクトのルートディレクトリに作成してください:
bashCopy codeNEXT_PUBLIC_PARSE_APP_ID=YOUR_APP_ID
NEXT_PUBLIC_PARSE_JS_KEY=YOUR_JS_KEY
NEXT_PUBLIC_PARSE_SERVER_URL=https://parseapi.back4app.com
これらの環境変数は、Vercelダッシュボードに設定されると、Vercelによっても使用されます。
7.7: ビルド設定の構成（オプション）
次のことを確認してください: Node.jsのバージョン と ビルドコマンド が正しく構成されていること（Vercelはこれを自動検出します）。
次のことについて: Next.js アプリの場合、デフォルト設定は次のようになります:
ビルドコマンド: npm run build
出力ディレクトリ: .next/
7.8: プロジェクトをデプロイする
GitHubリポジトリをリンクすると、Vercelは自動的にビルドとデプロイメントプロセスをトリガーします。
Vercelダッシュボードでビルドのステータスを確認できます。
7.9: デプロイメントログの確認 
デプロイメント中に問題が発生した場合、デプロイメントログを確認してデバッグできます。
7.10: デプロイされたアプリにアクセス 
デプロイメントが成功すると、VercelはあなたのNext.jsアプリがライブであるユニークなURLを提供します。そのURLにアクセスして、デプロイされたチケッティングアプリにアクセスできます。
例えば: https://your-app-name.vercel.app/
8. スムーズなデプロイメントの確保
Back4Appの資格情報: Back4Appの環境変数が.local（ローカル開発用）とVercelダッシュボード（本番用）で正しく設定されていることを再確認してください。
CORS（クロスオリジンリソースシェアリング）: Back4AppがCORS設定であなたのVercel URLを許可していることを確認してください。これはBack4Appダッシュボードのセキュリティで設定できます。
APIをテストする: デプロイする前に、Back4App APIとのインタラクションをローカルでテストして、すべてがスムーズに動作することを確認してください。
﻿
9. 結論
これらのステップを踏むことで、あなたの Next.jsチケッティングアプリ は今や Vercel, Back4App をバックエンドに使用してデプロイされるべきです。これで、Back4Appの設定からNext.jsでのフロントエンドの作成、Vercelでのアプリのライブデプロイまでの完全な開発サイクルが完了しました。
更新を行いたい場合は、変更をGitHubリポジトリにプッシュするだけで、Vercelが自動的に新しいデプロイメントをトリガーします。
フィールド名	タイプ
タイトル	文字列
説明	文字列
カテゴリ	文字列
優先順位	番号
進捗	番号
ステータス	文字列
作成日時	日付（自動生成）
更新日時	日付（自動生成）
更新日 24 Jan 2025
このページは役に立ちましたか？
ReactJSのためのバックエンドを構築する方法は？
Next.js、Vercel、および Back4app を使った請求書アプリのチュートリアル