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

このチュートリアルでは、 ticketing system を next js とアプリルーターを使用して、 back4app をバックエンドサービスとして、 tailwind css をスタイリングに使用します。このアプリでは、ユーザーがチケットを作成、更新、表示、削除できるようにし、データベース管理には parse server をback4app上で利用します。 1\ 前提条件 始める前に、次のものを用意してください node js があなたのマシンにインストールされていること ( node js インストールガイド https //nodejs org/ )。 back4app アカウント ( 無料でサインアップ https //www back4app com/ )。 vercel デプロイ用のアカウント ( vercelにサインアップ https //vercel com/ )。 2\ back4appの設定 back4appのダッシュボードにログインし、新しいプロジェクトを作成します。 「 data browser 」に移動し、次のスキーマで「 ticket 」という新しいクラスを作成します フィールド名 タイプ タイトル 文字列 説明 文字列 カテゴリ 文字列 優先順位 番号 進捗 番号 ステータス 文字列 作成日時 日付（自動生成） 更新日時 日付 （自動生成） 3\ フロントエンドの設定 (next js) 3 1 新しい next js プロジェクトを作成する 次のコマンドを実行して新しい next js プロジェクトを作成します npx create next app\@latest ticketing app cd ticketing app 3 2 依存関係のインストール インストール tailwind css , font awesome , と parse sdk をバックエンド操作のために npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome free parse npx tailwindcss init p 3 3 tailwind cssのセットアップ 次の tailwind config js ファイルを編集して、tailwind cssのコンテンツパスを設定します module exports = { content \[ ' /app/ / {js,ts,jsx,tsx}', ' /components/ / {js,ts,jsx,tsx}', ], theme { extend {}, }, plugins \[], } 次に styles/globals css , tailwindのインポートを追加します @tailwind base; @tailwind components; @tailwind utilities; 3 4 プロジェクト構造の作成 提供された構造に従って、必要なディレクトリとコンポーネントを作成します。 ディレクトリ構造 /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 」ファイルを作成します。 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 」に、次のものを作成します 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 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 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 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 , チケットのリストを表示します 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 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 https //vercel com/ でアカウントを作成してください。 github、gitlab、またはbitbucketでサインアップできます。vercelは、デプロイのためにリポジトリを直接リンクするのを簡単にします。 7 2 コードをgithubにプッシュする vercelにアプリをデプロイするには、プロジェクトを github (またはgitlab/bitbucket) のようなバージョン管理プラットフォームにホストする必要があります。 プロジェクトがまだgithubにない場合は、次の手順に従ってください プロジェクトディレクトリでgitを初期化します プロジェクトをgithubに追加します 7 3 vercel cliをインストールする（オプション） コマンドラインから直接デプロイすることを好む場合は、 vercel cli をグローバルにインストールします または、次に説明するvercelのダッシュボードを介してデプロイすることもできます。 7 4 githubリポジトリをvercelに接続する に行く vercel https //vercel com/ クリック 新しいプロジェクト あなたのnext jsプロジェクトを含むgitリポジトリを選択します。 プロジェクトを設定します vercelは自動的にそれが next js プロジェクトであることを検出し、正しいビルド設定を適用します。 を設定します ルートディレクトリ プロジェクトのフォルダーに（必要に応じて）。 7 5 環境変数を設定する あなたの back4appの資格情報 とvercelの他の環境変数を設定する必要があります。 vercelの プロジェクト設定 , 環境変数 セクションに移動します。 次の環境変数を追加します 7 6 env localでparse設定を行う（オプション） 開発中にローカル環境変数を使用する場合は、次の変数を含む env localファイルをプロジェクトのルートディレクトリに作成してください これらの環境変数は、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が自動的に新しいデプロイメントをトリガーします。