データベースとの接続

この章では、Next.jsアプリのデータベースとの接続の方法を学びます。本章でデータベースとの連携の仕方を理解することで、本格的なダッシュボードの構築に必要な知識が完成します。

データベースとの接続の概要

Next.jsで構築したダッシュボードを実際のデータベースと連携させるには、 データベースの接続情報を使って、データベースにクエリを送信する必要があります 。しかし、ソースコードの中に直接接続情報 (秘密鍵やコネクションストリング) を書いてしまうと、Gitにコミットしてしまい流出の原因になります。

そこで、 環境変数 という仕組みを使います。環境変数を使うと、ソースコードの中に直接書きたくない情報を、実行時に注入することができます。

環境変数の設定

開発環境では、環境変数は .env というファイルを使って設定します。フォーマットは以下のように、 [環境変数名]=[値] という形式で設定します。

DATABASE_URL=postgresql://user:password@host:5432/database

今回使用しているテンプレートでは、.envファイルはGitにコミットしないように設定されています。

PostgreSQLとの接続

PostgreSQLは、最も普及しているオープンソースのデータベースです。たとえばSupabaseやNeonは、クラウド上のPostgreSQLを利用できるサービスです。PostgreSQLの接続の仕方を覚えると、これらの人気のデータベースサービスと連携することができます。

PostgreSQLとNext.jsとを接続するにはいろいろな方法がありますが、今回はConnection Stringを使用した方法を紹介します。

まずは、環境変数を設定しましょう。お使いのPostgreSQLサービス (SupabaseやNeon) で提供されているConnection Stringを環境変数に設定します。

DATABASE_URL=postgresql://user:password@host:5432/database

ここまでできたら、次のようにClaude Codeに指示してみましょう。 (プロンプト中の customers テーブル は例です。実際にはお使いのデータベースのテーブル名に変更してください)

PostgreSQLの customers テーブルの一覧をテーブル表示するページを作成してください。
接続情報は .env ファイルに記載しています。
PostgreSQLへのクエリの実行は、api routeで行い、フロントエンドからはapi routeを呼び出すようにしてください。
ページのリンクをサイドバーに追加してください。

以下のようなページが作られたでしょうか？

今回の実装は少し複雑なので、最初のうちはエラーが出るかもしれません。そうなったら、Claude Codeにエラーメッセージをコピペして報告し、何度かやり取りをすると解決できると思います。

振り返り

本章では、Next.jsアプリのデータベースとの接続の方法を学びました。接続するデータベースの種類が変わっても、基本的な考え方と実装の流れは同じです。あなたやあなたの組織のニーズに応じて、データベースとの接続をセットアップしてみてください。