本PJではNext.js公式チュートリアルを元に実施します。
今回はchapter6の内容となります！
🚀 Webアプリの心臓部！Next.jsとデータベースを繋いでデータを保存しよう
Webアプリケーションがただの見た目だけでなく、ユーザーの情報を記憶したり、ブログ記事を保存したりするためには、「心臓部」となるデータベースが不可欠です。
今回は、Next.jsアプリケーションにPostgreSQLというデータベースをセットアップし、Vercelというプラットフォームを使って開発から公開までをスムーズに行う方法を見ていきましょう！
準備運動：設計図をGitHubに、建築はVercelにお任せ！
データベースという大切な保管庫を作る前に、まずは私たちのアプリの"設計図"（ソースコード）を安全な場所に保管し、"自動建築ロボット"（デプロイ環境）と連携させましょう。
-
設計図を保管庫（GitHub）へ： まだの方は、プロジェクトをGitHubリポジトリにプッシュしましょう。これがすべての基本になります。
-
自動建築ロボット（Vercel）と契約： Vercelで無料アカウントを作成し、GitHubアカウントと連携します。これにより、魔法のような自動化が手に入ります。
- 自動デプロイ機能 🪄： GitHubの
mainブランチにコードをプッシュするたびに、Vercelがそれを検知して自動で最新版のWebサイトを公開してくれます。 - 瞬間プレビュー機能 ✨： 新しい機能を追加する際（プルリクエスト作成時）、Vercelはお試し用のURLを即座に生成します。チームメンバーに「こんな感じどう？」と見せたり、公開前にバグがないかチェックしたりするのに非常に便利です。
🏠 データの保管庫（PostgreSQL）をVercel上で作ろう！
VercelとGitHubが繋がったら、いよいよ本題のデータベース作成です。Vercelを使えば、これも驚くほど簡単です。
-
手順： Vercelプロジェクトのダッシュボードを開き、「Storage」タブに移動して「Create Database」をクリック。いくつかの選択肢（Neon, Supabaseなど）から好きなものを選び、設定を進めるだけ！
-
ポイント📍： リージョン（地域）を選ぶ際は、自分のプロジェクトと同じ場所（例: Washington D.C）を選ぶのがオススメです。データのやり取りをする場所が物理的に近い方が、サイトの応答が速くなります。
🔑 保管庫の"秘密の鍵"（環境変数）を安全に管理しよう
データベースに接続するには、IDやパスワードのような「秘密の鍵」が必要です。これを環境変数と呼びます。
この鍵は絶対に他人に知られてはいけない超重要情報です。プログラムコードの中に直接書き込むのは、家の鍵をドアに貼り付けておくようなもので、非常に危険です！
安全な鍵の管理方法
Vercelから鍵をコピー： Vercelのダッシュボードに表示される環境変数のスニペットをコピーします。
ローカルに鍵を保管： プロジェクト内にある.env.exampleというファイルの名前を.envに変更し、コピーした内容を貼り付けます。
「見せないで！」の目印をつける (.gitignore)： プロジェクトには.gitignoreというファイルがあり、ここには「GitHubにアップロードしたくないファイル」をリストアップします。.envがこのリストに必ず含まれていることを確認してください。 これで、うっかり秘密の鍵を全世界に公開してしまう事故を防げます。
📚 本棚に最初の本を並べる：初期データの投入（シーディング）
空っぽのデータベースができたので、次は動作確認のために「お試しデータ」を入れてみましょう。この作業をシーディングと呼びます。
このチュートリアルプロジェクトには、便利なシーディング用スクリプトが用意されています。
-
実行方法： 開発サーバーを起動 (
pnpm run dev) した後、ブラウザでhttp://localhost:3000/seedにアクセスするだけ！ -
何が起こるの？： このページにアクセスすると、スクリプトが走り、必要なテーブル（データの整理棚）を作成し、あらかじめ用意されたサンプルデータを流し込んでくれます。
-
確認： しばらくして「Database seeded successfully」と表示されれば成功です！
✅ 最終チェック：ちゃんとデータは入ってる？
最後に、データベースに正しく接続でき、データが格納されているかを確認してみましょう。
プロジェクト内のテスト用ファイル（app/query/route.tsなど）を使って、データベースに「ユーザーのリストを見せて！」といった問い合わせ（クエリ）を投げかけます。ブラウザで特定のURLにアクセスし、先ほど投入したサンプルデータの一部（請求書情報など）が表示されれば、すべての設定は完璧です！
これで、あなたのNext.jsアプリはデータを永続的に保存し、いつでも取り出せる強力な心臓部を手に入れました。
今回はここまで！ ご覧いただきありがとうございます！