【手順メモ】ローカル環境におけるNext.jsプロジェクトでの Prisma セットアップ


# 開発環境
```
$ sw_vers 
ProductName:            macOS
ProductVersion:         13.5.1
BuildVersion:           22G90

$ node -v
v19.2.0

$ npm -v
8.19.3

$ npx next -v
Next.js v13.4.19
```
# 前提
* Next.jsプロジェクトの初期設定は済んでいるものとする
* DBはPostgreSQLを使用

**ファイル構成**
```
Project-Directory-Name
    ├─ .next
    ├─ node_modules
    ├─ public
    ├─ src
        └ pages
        └ styles
    ├─ .env
    ├─ .eslintrc.json
    ├─ .gitignore
    ├─ next-env.d.ts
    ├─ next.config.js
    ├─ package-lock.json
    ├─ package.json
    ├─ postcss.config.js
    ├─ README.md
    ├─ tailwind.config.js
    └  tsconfig.json
```

# 1. Prisma をセットアップ
```bash
# Prisma をインストール
$ npm install prisma --save-dev

# Prisma をセットアップ
$ npx prisma init --datasource-provider PostgreSQL

✔ Your Prisma schema was created at prisma/schema.prisma
  You can now open it in your favorite editor.

warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.

Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
2. Run prisma db pull to turn your database schema into a Prisma schema.
3. Run prisma generate to generate the Prisma Client. You can then start querying your database.

More information in our documentation:
https://pris.ly/d/getting-started
```

`prisma`ディレクトリが作成される
![スクリーンショット 2023-09-12 14.09.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/ceb6e3d8-494c-9a50-82dd-d4d14f0498a8.png)

# 2. DBサーバーの用意
* ローカル環境で開発するので自分でDBサーバーをたてる必要がある
* DBサーバーにPostgreSQLを使用
* [PostgreSQL Mac OS](https://postgresapp.com/downloads.html) をインストール


# 3. DBクライアントの用意
* Table Plusを使用

## 3.1 DBサーバーへの接続の設定
* 「＋」をクリック
![スクリーンショット 2023-09-12 23.24.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/153ceec9-b61f-b59a-ec4e-28cb2b0823ad.png)

* 「PostgreSQL」を選択し「Create」をクリック
![スクリーンショット 2023-09-12 23.32.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/d9cd46b1-d65e-7610-c5fa-a995605806f1.png)


* 以下の画像のように設定する
    * PASSWORD: なし（postgresユーザーはローカルから繋ぐ時はパスワード不要のため）
    * 「Test」をクリックして入力欄が黄緑色になったら「Connect」をクリック
![スクリーンショット 2023-09-13 0.14.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/294ee201-fd49-89c8-0d6c-65fd2e335df3.png)


## 3.2 論理DBを作成
* DBアイコンをクリック
![スクリーンショット 2023-09-12 23.47.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/652702ad-bb38-fa5d-f2db-c24e9709ee40.png)

* 論理DBを新規作成（「New」をクリック）
![スクリーンショット 2023-09-12 23.55.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/34f6801f-713b-8385-ddca-5d9fa2b79faf.png)

* DB名を入力し「OK」をクリック
![スクリーンショット 2023-09-12 23.59.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/0b05e767-1e4b-527e-2fc8-f30cba97111d.png)

* DB名を選び「Open」をクリック
![スクリーンショット 2023-09-13 0.00.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/dca79144-85ef-6f23-5459-83ebefd2d07e.png)

* 以下のような画面になる
![スクリーンショット 2023-09-13 0.02.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/7bf90590-ab7a-a60e-5e9c-cb030539d86e.png)

# 4. DBのER図を作成（データモデリング）
```mermaid
erDiagram
    Event {
        int EventID
        datetime StartDateTime
        datetime EndDateTime
        int ParticipantCount
    }
```

# 5. ER図を元に Prisma スキーマを作成
```prisma/schema.prisma
model Event {
  id               Int      @id @default(autoincrement())
  StartDateTime    DateTime
  EndDateTime      DateTime
  ParticipantCount Int
}
```

# 6. Migrationファイル生成とDBへの反映

## 6.1 `.env.local`ファイルを作成し、その中に`DATABASE_URL`を定義する

```.env.local
DATABASE_URL="DBのプロトコル://user名:password@ホスト名:ポート番号/DB名?schema=スキーマ名"
```

* PostgreSQLにおけるスキーマは複数のテーブルをグルーピングするもの（フォルダみたいなもの）。今回は、デフォルトで設定されてる`public`スキーマを使用する

## 6.2 Prismaから`.env.local`を読み込むために、`dotenv-cli`をインストール
* Next.jsは`.env`、`.env.local`を自動的に読み込む（`.env.local`が優先）が、Prismaはデフォルトだと`.env`しか読み込まないので、`.env.local`を読み込むために`dotenv-cli`を使う

```bash
$ npm install --save-dev dotenv-cli
```
> `dotenv-cli`を使用すると、作業している環境に適した接続 URL を読み込むことができます。
参考：[複数の .env ファイルの使用](https://www.prisma.io/docs/guides/development-environment/environment-variables/using-multiple-env-files)


## 6.3 Prisma Migrate を実行

```bash
./node_modules/.bin/dotenv -e .env.local -- npx prisma migrate dev --name init
```
* migrationファイルが作成される
![スクリーンショット 2023-09-15 17.40.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/2fa1618b-4e1c-55d7-813a-feebb65c9149.png)



## 6.4 Table Plus でDB内にテーブルが作成されてるのを確認する
* Eventテーブルが作成されてるのを確認できた
![スクリーンショット 2023-09-15 17.34.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/2079380a-f1cf-d91e-65e0-e4d9a271dc8e.png)

以上でPrismaセットアップ完了です。

# 参考サイト
* Prisma Docs - https://www.prisma.io/docs/getting-started/quickstart
* デフォルトの環境変数 - https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/environment-variables#%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%AE%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0
* PostgreSQLにおけるデータベース、スキーマ、テーブルの関係 - https://www.javadrive.jp/postgresql/schema/index1.html