閉じる

PostgreSQLローカル環境セットアップ完全ガイド【Next.js対応】

※この記事の内容は、生成AI(ChatGPT)を活用して作成しています。正確性には配慮していますが、技術的な仕様や利用規約は変動する可能性があるため、最新情報は各公式サイト等でご確認ください。

はじめに

本記事では、Windows環境でPostgreSQLをローカルにインストールし、Next.jsプロジェクトで利用できるように構成するまでの流れを解説します。
Prismaとの連携や.env設定まで含めた、実践的なセットアップ手順です。

1. PostgreSQLのダウンロード・インストール

1.1 公式サイトからダウンロード

  1. PostgreSQL公式サイト にアクセス
  2. Download the installer」をクリック
  3. 最新版(例:PostgreSQL 18.0、Windows x86-64)を選択

1.2 インストーラーの実行

ダウンロードしたファイルを実行し、ウィザードに従ってインストールを進めます。


2. インストール時の設定

2.1 主要設定項目

設定項目推奨内容補足
パスワードpassword(開発用)本番環境では強固に設定
ポート番号5432デフォルトのままでOK
ロケールC互換性が高く推奨
pgAdmin 4有効化後で使用する管理ツール

2.2 インストール後の確認

  • pgAdmin 4が起動可能であること
  • サービス「PostgreSQL」が稼働していること

3. pgAdmin 4のセットアップ

  1. スタートメニューから「pgAdmin 4」を起動
  2. 初回はマスターパスワードを設定
  3. 「Servers」内にPostgreSQLサーバーが表示されることを確認

4. データベースの作成

  1. 「Databases」を右クリック → 「Create」 → 「Database…」
  2. 任意のデータベース名を入力(例:myapp_database
  3. 「Save」をクリックし、作成されたことを確認

5. Next.jsプロジェクトでの設定

5.1 必要パッケージのインストール

npm install next-auth @auth/prisma-adapter prisma @prisma/client bcryptjs
npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu
npm install @radix-ui/react-select @radix-ui/react-toast
npm install lucide-react react-hook-form @hookform/resolvers zod
npm install date-fns

5.2 環境変数の設定

プロジェクト直下に .env.local を作成:

DATABASE_URL="postgresql://postgres:password@localhost:5432/myapp_database"
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"
NODE_ENV="development"

6. Prismaとの連携

6.1 初期化とスキーマ設定

npx prisma init

prisma/schema.prisma に以下を記述:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

6.2 マイグレーション

npx prisma generate
npx prisma db push

7. 動作確認

  1. pgAdminでmyapp_databaseが作成されていることを確認
  2. Next.jsアプリを起動: npm run dev
  3. Prismaスキーマのテーブル(usersなど)が作成されていることを確認

8. トラブルシューティング

エラー原因対処
Can’t reach database serverポートやURLの不整合.env.localとPostgreSQL設定を再確認
Environment variable not found環境変数ファイルが未読込.env.localのパスと形式を確認
Prisma schema validationスキーマ構文エラーprisma/schema.prismaの文法確認

まとめ

本記事では、PostgreSQL + Next.js + Prismaをローカルで動作させる完全なセットアップ手順を紹介しました。
pgAdminによる管理や.env.localの構成を押さえれば、すぐに開発を開始できます。


参考リンク

CONTACT

お問い合わせはエールクエスト公式サイトよりお願いいたします。