データベースに新しいアイテムを作成

請求書の作成 - ステップバイステップ

1. フォームの作成: まず、詳細情報を取得するためのフォームを用意。ここでユーザーが新しい請求書の情報を入力;
2. サーバーアクションの利用: フォームデータを処理するための特別なサーバーアクションを作成。フォームが送信されると、このアクションが実行;
3. フォームからデータを取得: サーバーアクション内でフォームから情報を取り出す。箱を開けて中身を確認するイメージ;
4. データの確認と準備: データを確認し、正しいかどうかをチェック。レシピの材料が新鮮で正しいか確認するようなもの。問題なければ、データベースに登録できるように準備;
5. データの挿入: データベースにデータを登録;
6. キャッシュの更新と請求書ページへの戻り: データ追加後、キャッシュを更新。全員が最新情報を取得できるようにする。その後、ユーザーを請求書ページに戻し、新しく作成した請求書を確認できるようにする。

プロジェクトに戻る

1. フォームの作成

app/dashboard/invoices ディレクトリ内に「create」という新しいフォルダーを作成します。このフォルダー内に page.tsx という新しいファイルを作成します。このファイルは、ユーザーが請求書を作成できる新しいページとして機能します。

以下のコードを page.tsx ファイルにコピー＆ペーストしてください。

このページはサーバーコンポーネントを使用してユーザー情報を取得し、取得した情報を既製の <Form> コンポーネントに渡します。<Form> コンポーネントの構成は以下の通りです：

• ユーザー用のドロップダウン；
• 金額入力フィールド；
• ステータス選択用のラジオボタン；
• 完了用の送信ボタン。

「Create Invoice」ボタンをクリックすると、必要な情報の入力を求めるフォームに遷移します。

2. サーバーアクションの使用

1. lib ディレクトリに移動;
2. actions.ts という新しいファイルを作成;
3. 先頭に 'use server' ディレクティブを追加;
   • なぜ 'use server' なのか？ - このディレクティブにより、関数がクライアントコンポーネントとサーバーコンポーネントの両方で柔軟に利用可能。サーバーアクションを整理する便利な方法だが、必要に応じてサーバーコンポーネント内に直接埋め込むことも可能。
4. サーバーアクション関数の作成。

次に、<Form> コンポーネント内で createInvoice ファイルから actions.ts をインポート。action 要素に <form> 属性を追加し、createInvoice アクションを呼び出す。

3. フォームからデータを取得

app/lib/actions.ts に戻り、formData メソッドを使って .get(name) の値を抽出。作業が完了したら、フォームに入力し、ターミナルコンソールで入力データを確認可能。

結果:

4. データの確認と準備

フォームデータをデータベースに保存する前に、正しい形式と型であることを確認することが重要です。本コースでは、invoice テーブルデータに特定のフォーマットを使用しています。

このプロセスを簡単にするために、型検証のためのいくつかの選択肢があります。型を手動で確認する代わりに、TypeScript 向けのバリデーションライブラリである Zod を利用できます。Zod はバリデーション作業を簡単にする便利なツールです。

actions.ts ファイルで行うべきことは以下の通りです:

1. actions.ts ファイルに Zod をインポートする;
2. フォームオブジェクトの構造に合わせた Zod スキーマを作成する。このスキーマは、formData がデータベースに保存される前に正しいことを保証するルールとして機能します。

次に、rawFormData を CreateInvoice に渡して型を検証します。

金額をセント単位に変換し、バニラJSを使用して「YYYY-MM-DD」形式の日付を新規作成。

5. データの挿入

必要な値がすべて揃ったので、sql を使ってデータベースに送信。

6. キャッシュのリフレッシュと請求書ページへの戻り

Next.js にはクライアントサイドルーターキャッシュという便利な機能があり、一定期間ユーザーがサイト内で移動した履歴を保持。キャッシュとプリフェッチを組み合わせることで、ユーザーはサーバーへのリクエストを増やすことなく、異なるページ間を素早く移動可能。

ここで実施したい内容：

1. 請求書ページのデータを更新したため、ユーザーに最新情報を表示する必要がある。これを実現するために、revalidatePath 関数でキャッシュをクリア。これによりサーバーへ新しいリクエストが送信され、最新データを取得；
2. データ更新とキャッシュクリア後、ユーザーをスムーズに請求書ページへ戻す。これには redirect 関数を使用。元のページへ案内するイメージ。

実践例