Next.js × Vercel Postgres × Prisma のプロジェクトのセットアップ

# はじめに
Next.jsの知識を深めるために、Todoアプリを作ることにしました。その際の環境構築の方法を記しておきます。何か間違っていることなどございましたらコメントいただけますと、とても喜びます。
- Next.js：v14.0.4
- prisma/client：v5.8.1
- typescript: v5
# １．Next.jsプロジェクトのセットアップ
### コマンド実行
プロジェクトを作りたい場所に移動して、下記のコマンドをターミナルで実行することで、最新のNext.jsのプロジェクトをセットアップできる。
```shell:ターミナル
npx create-next-app@latest
```
プロジェクトの名前を入力する。下記はnext-todoというプロジェクト名。
```shell:ターミナル
? What is your project named? >> next-todo
```
そのあと色々聞かれるが私みたいによく分かんない人は全部エンターキーでもOK。
  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/8b085ef7-7115-bab0-41ed-ce48d921ca2c.png)
詳しく知りたい人は下記のサイトが参考になりそう。

https://qiita.com/kaba_san/items/302b8b731e7fbfa56367


### ローカルでアクセス
作ったプロジェクトに移動し、`npm run dev`でローカルサーバを立ち上げる。
```shell:ターミナル
npm run dev
```

おそらく``http://localhost:3000``にアクセスし、下記のようにブラウザで表示されていればNext.jsのセットアップは完了。確認したら、`Ctrl + C`で閉じる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/f347f761-8019-61c6-4811-6c46a8cf52e8.png)

# ２．GitHubのリポジトリ作成
### リモートリポジトリ作成
`Vercel`は`GitHub`のリポジトリと結び付けることができるため、リポジトリを作成しておく。
お好きなプロジェクト名を入力して、右下のCreate repositoryをクリック。
![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/cdb43a17-619b-f4c4-16f0-a515065d3261.png)
### ローカルとリモートを結びつける
作ったフォルダで下記のコマンドを実行。ユーザー名は自分のGitHubの名前に書き換えてね。
```shell:ターミナル
echo "# next-todo-app" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:ユーザー名/next-todo.git
git push -u origin main
```
リモートリポジトリの作成完了。

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/771f9927-af9a-f23e-c2fa-ca8027dcaa40.png)
# ３．Vercelにプロジェクトを追加
### アクセス
下記からVercelにアクセスし、アカウントがない場合は作成する。

https://vercel.com
### プロジェクトの追加
アカウントを作成できたら、自分のダッシュボードにアクセスし、```Add New```ボタンをクリックし、`Project`をクリックする。

![verceltop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/98072282-18c0-edb4-ad18-a98597497a06.png)

作成したGitHubのリポジトリが出てくるので、```Import```ボタンをクリックする。

![vercel-import.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/d902cd09-21d2-4b1e-49f0-ae3c9c06af0d.png)

### プロジェクトのデプロイ
Vercel Postgresを使う際にデプロイしていないとなんかうまくいかなかったので、```Deploy```ボタンをクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/ea2a2247-97b1-9ac5-a0ce-e3c1be5c5ad8.png)

Congratulaitons!とでたら成功！やった！`Continue to Dashboard`をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/1e43b8dc-4d84-c95a-9102-3aeb2f251ec0.png)

# ４．Vercel Postgresのセットアップ
### データベースの作成
先ほどデプロイしたプロジェクトのダッシュボードにアクセスしていると思うので、上のタブから```Storage```をクリックする。そして、`Postgres`の`Create`をクリックする。

![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/00becb1e-556d-5249-2a83-dcc5799e1f25.png)

データベース名を入力し、地域を選んで`Create & Continue`をクリックする。地域はシンガポールを選択したが、最良なのかは知らない。

そしたら多分プロジェクトとデータベースが繋がる。

### 繋がっているか確認
プロジェクトのダッシュボードで上のタブから`Storage`をクリックする。下の画像のようにデータベースが表示されていればおそらく繋がっている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/1c6ba4b5-1bf4-e0c7-98b9-d4a0bfd7f5a2.png)


# ５．Prismaのセットアップ
### コマンド実行
下記のコマンドをターミナルで実行する。
> Prisma CLI を開発依存関係としてプロジェクトにインストールします。
```shell:ターミナル
npm install prisma --save-dev
```
> 次に、次のコマンドを使用してPrisma スキーマファイルを作成し、Prisma プロジェクトをセットアップします。
```shell:ターミナル
npx prisma init
```
あとで使うことになるので今のうちにインストールしておこう。
```shell:ターミナル
npm i @prisma/client
```
全部実行したらプロジェクトをお好きなエディタで開いて、ルートディレクトリに`prisma/schema.prisma`が作成されていることを確認する。
### .envファイル編集
プロジェクトのダッシュボードに戻り、`Storage`クリック、作ったデータベースクリック、`.env.local`というタブに環境変数がいっぱい書いてあるのでコピーする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/af7f7c32-815a-22f6-3a56-cebd816b540c.png)

ルートディレクトリに`.env`という名前のファイルがあると思うのでそこに先ほどコピーした環境変数を貼り付ける。

:::note alert
注意！.envファイルに環境変数を貼り付けた後、`.gitignore`ファイルに`.env`という記載を忘れないように！筆者は忘れててGitHubからメールで怒られました。
:::

### .envファイルをGitHubに上げた場合
おそらく下記のコマンドで`.env`をGitの管理から外せるはず。
```shell:ターミナル
git rm -r --cached .env
git commit -m"ignore .env file"
git push
```

### schema.prismaを編集
`schema.prisma`を開き下記のようにコードを修正する。

```js:prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("POSTGRES_PRISMA_URL")
  directUrl = env("POSTGRES_URL_NON_POOLING")
  shadowDatabaseUrl = env("POSTGRES_URL_NON_POOLING")
}
```
> provider: データベースプロバイダとしてPostgreSQLを使用することを指定しています。

> url: データベース接続用のURLです。

> directUrl: 直接データベースを接続する際に使用するURLです。

> shadowDatabaseUrl: マイグレーション用のシャドウデータベースのURLです。本番データベースに影響を与えることなく、マイグレーションを実行できます。



# おわりに
ここまで読んでいただきありがとうございます。無事にセットアップができたでしょうか？次の記事からTodoアプリのコーディングに入っていきます。

# 参考にさせていただいた記事

https://zenn.dev/mostlove/articles/c9e6f1aa45ea09

https://qiita.com/kaba_san/items/302b8b731e7fbfa56367

https://zenn.dev/arsaga/articles/3f5bce7c904ebe

https://www.prisma.io/docs/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-postgresql

https://www.prisma.io/docs/getting-started/quickstart

https://vercel.com/guides/nextjs-prisma-postgres