はじめに
Next.jsの知識を深めるために、Todoアプリを作ることにしました。その際の環境構築の方法を記しておきます。何か間違っていることなどございましたらコメントいただけますと、とても喜びます。
- Next.js：v14.0.4
- prisma/client：v5.8.1
- typescript: v5
１．Next.jsプロジェクトのセットアップ
コマンド実行
プロジェクトを作りたい場所に移動して、下記のコマンドをターミナルで実行することで、最新のNext.jsのプロジェクトをセットアップできる。
npx create-next-app@latest
プロジェクトの名前を入力する。下記はnext-todoというプロジェクト名。
? What is your project named? >> next-todo
そのあと色々聞かれるが私みたいによく分かんない人は全部エンターキーでもOK。
詳しく知りたい人は下記のサイトが参考になりそう。
ローカルでアクセス
作ったプロジェクトに移動し、npm run devでローカルサーバを立ち上げる。
npm run dev
おそらくhttp://localhost:3000にアクセスし、下記のようにブラウザで表示されていればNext.jsのセットアップは完了。確認したら、Ctrl + Cで閉じる。
２．GitHubのリポジトリ作成
リモートリポジトリ作成
VercelはGitHubのリポジトリと結び付けることができるため、リポジトリを作成しておく。
お好きなプロジェクト名を入力して、右下のCreate repositoryをクリック。
ローカルとリモートを結びつける
作ったフォルダで下記のコマンドを実行。ユーザー名は自分のGitHubの名前に書き換えてね。
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
リモートリポジトリの作成完了。
３．Vercelにプロジェクトを追加
アクセス
下記からVercelにアクセスし、アカウントがない場合は作成する。
プロジェクトの追加
アカウントを作成できたら、自分のダッシュボードにアクセスし、Add Newボタンをクリックし、Projectをクリックする。
作成したGitHubのリポジトリが出てくるので、Importボタンをクリックする。
プロジェクトのデプロイ
Vercel Postgresを使う際にデプロイしていないとなんかうまくいかなかったので、Deployボタンをクリックする。
Congratulaitons!とでたら成功！やった！Continue to Dashboardをクリックする。
４．Vercel Postgresのセットアップ
データベースの作成
先ほどデプロイしたプロジェクトのダッシュボードにアクセスしていると思うので、上のタブからStorageをクリックする。そして、PostgresのCreateをクリックする。
データベース名を入力し、地域を選んでCreate & Continueをクリックする。地域はシンガポールを選択したが、最良なのかは知らない。
そしたら多分プロジェクトとデータベースが繋がる。
繋がっているか確認
プロジェクトのダッシュボードで上のタブからStorageをクリックする。下の画像のようにデータベースが表示されていればおそらく繋がっている。
５．Prismaのセットアップ
コマンド実行
下記のコマンドをターミナルで実行する。
Prisma CLI を開発依存関係としてプロジェクトにインストールします。
npm install prisma --save-dev
次に、次のコマンドを使用してPrisma スキーマファイルを作成し、Prisma プロジェクトをセットアップします。
npx prisma init
あとで使うことになるので今のうちにインストールしておこう。
npm i @prisma/client
全部実行したらプロジェクトをお好きなエディタで開いて、ルートディレクトリにprisma/schema.prismaが作成されていることを確認する。
.envファイル編集
プロジェクトのダッシュボードに戻り、Storageクリック、作ったデータベースクリック、.env.localというタブに環境変数がいっぱい書いてあるのでコピーする。
ルートディレクトリに.envという名前のファイルがあると思うのでそこに先ほどコピーした環境変数を貼り付ける。
注意！.envファイルに環境変数を貼り付けた後、.gitignoreファイルに.envという記載を忘れないように！筆者は忘れててGitHubからメールで怒られました。
.envファイルをGitHubに上げた場合
おそらく下記のコマンドで.envをGitの管理から外せるはず。
git rm -r --cached .env
git commit -m"ignore .env file"
git push
schema.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アプリのコーディングに入っていきます。
参考にさせていただいた記事