コンテンツにスキップ

Chapter 6: データベースの接続

ダッシュボードにリアルなデータを流し込むため，Vercel の Postgres をセットアップします。GitHub 連携から環境変数の配置，初期データの投入まで一気に進めましょう。

この章で身につくこと

  • プロジェクトを GitHub に公開して Vercel と連携する
  • Vercel で Postgres データベースを作成し，環境変数を設定する
  • シードスクリプトで初期データを投入する
  • API ルートを使ってクエリの動作を確認する

Step 1. GitHub リポジトリを用意する

まだリポジトリを作成していない場合は，GitHub のガイド を参考に nextjs-dashboard プロジェクトを push しておきましょう。GitLab や Bitbucket でも構いませんが，ここでは GitHub を使用します。

Step 2. Vercel アカウントを作成する

  1. Vercel のサインアップページ で Hobby プラン を選択し，Continue with GitHub をクリックします。
  2. 連携が済むと Import Project 画面が表示されるので，作成したリポジトリを選んで「Import」→「Deploy」と進めます。 alt text alt text alt text

デプロイが完了すると，ドメインやビルドの履歴が確認できるダッシュボードへ遷移します。以降は main ブランチへ push するたびに自動デプロイされ，Pull Request ごとにプレビュー URL も生成されます。

Step 3. Postgres データベースを作る

  1. プロジェクトダッシュボードで Storage タブを開き，「Create Database」を選択。
  2. Postgres を選び，表示されるプロバイダ（Neon や Supabase など）から好きなものを選択します。 alt text
  3. リージョンは Vercel プロジェクトと同じ Washington D.C (iad1) を選ぶと遅延が最小になります。 alt text
  4. 作成が完了したら .env.local タブの Show secret を押し，表示された環境変数をコピーします。 alt text

ローカルリポジトリの .env.example を .env にリネームし，コピーした内容を貼り付けてください。

重要

.gitignore に .env が含まれているか必ず確認し，認証情報が公開リポジトリへ上がらないよう注意しましょう。

Step 4. データベースをシードする

チュートリアルではブラウザから実行できるシード API を用意しています。次の手順で初期データを投入します。

  1. 開発サーバーを起動する。

    Terminal
    pnpm dev

  2. ブラウザで http://localhost:3000/seed を開く。

Database seeded successfully と表示されれば成功です。スクリプトは SQL でテーブルを作成し，placeholder-data.ts の内容を流し込みます。完了後は /app/seed/route.ts を削除して問題ありません。

トラブルシューティング

  • シークレットは「Reveal」してからコピーしてください。伏せ字のままだと .env に正しい値が入らず接続に失敗します。
  • パスワードハッシュには bcrypt を使用しています。環境によって動かない場合は bcryptjs に置き換えても構いません。

  • シードに失敗したらテーブルを削除して再実行できます。

    DROP TABLE tablename;

    ※テーブルとデータがすべて消えるので，本番環境では使用しないでください。

Step 5. クエリが動くか確認する

/app/query/route.ts には listInvoices() を呼び出してレスポンスを返すルートハンドラーが用意されています。

SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;

コメントアウトを解除し，ブラウザで http://localhost:3000/query にアクセスしてください。請求金額と顧客名が JSON で返ってくれば接続完了です。

これでバックエンドの基盤が整いました。次章からはデータを読み込み，ダッシュボードへ表示していきます。