はじめに

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を開き下記のようにコードを修正する。

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アプリのコーディングに入っていきます。

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