Next.jsでPrismaとSupabaseを使ってみる Prisma設定編
概要
ここ最近、Next.jsで開発しているとsupabaseやMongoDBなどのデータベースとの連携でPrismaというのをよく聞くようになった。
せっかくなのでPrismaについて調べてみた。
今回はNext.js + Prisma + SupabaseでTODOリストを作ってみる。
長くなりそうなので2回に分けてみる。
Prismaとは？
PrismaはNode.jsを対象としたオープンソースORMで、型安全なデータベースアクセスが特徴で、TypeScriptとの相性が良いです。
prisma.jsでデータベースやクエリを発行できたりします。
自分なりの解釈だが、Next.jsで例えばSupabaseやMongoDBを利用するとそれぞれのメソッドを使用しないといけないがPrismaを使う事で、どちらのデータベースを利用してもPrismaを利用すれば共通のメソッドでデータの追加などできるという認識。
Prismaの構成
Prismaは次の3つの要素から構成されています。
Prisma Client
データベースとのやり取りを行うためのライブラリで、メソッドでデータベースを操作する。
Prisma Migrate
データベースのスキーマ管理を行うためのCLIツール
Prisma Studio
Web上でデータベース管理を行うためのGUIツール。Supabaseも管理画面があるから今回は使わないかな。。
データベース・フレームワーク・ライブラリとの相性
Prismaは以下のフレームワークやデータベースと相性がよい。
今回はSupabaseで試しますが、SupabaseはPostgreSQLデータベースをベースにしてるのでPostgresSQLでいける。
データベース
- PostgreSQL
- MySQL
- SQLite
- MongoDB
フレームワーク
- Next.js
- Nest.js
- Apollo
- GraphQL
- Express
実装
実際にNext.jsのプロジェクトにPrismaを使ってみることにする。今回はPrismaを使ってみる事が目的だが、実際のプロジェクトの順番でメモ。
1:Supabaseでプロジェクト作成する。
まずはSupabaseでPrismaで利用するPostgreSQLを準備する。
Supabaseの細かい設定は他のサイトを参照してください。
今回、Supabaseを利用しますが、Prismaでデータベースの操作をするのでプロジェクトで作成したDatabase Settingの項目の赤い枠のURLとデータベースパスワードが必要になります。
2:Next.jsのプロジェクトを作成
Next.jsのプロジェクトを作成しないといけないので、下記のコマンドで作成。
Next.jsは最新のバージョンです。
npx create-next-app@latest prisma_app --typescript
3:Prismaのインストールと設定
Next.jsでプロジェクトを作成したら、Prismaの流れです。
Prismaをインストール
こちらは公式サイトに載ってます。まずはインストール。
npm install prisma --save-dev
Prisma Clientをインストール
実際にNext.jsでPrismaからデータの追加・削除などを実行する場合、Prisma Clientが必要になるので下記でインストールする。
npm install @prisma/client
Prismaを初期化する
インストール後は初期化します。
npx prisma init
データベースはPostgreSQLが初期値になってるので、SQListeを使いたい場合、初期化は以下のようになる。
npx prisma init --datasource-provider sqlite
すると下記の画像のようにNext.jsのプロジェクトにprismaフォルダが追加されschema.prismaというファイルが作成されます。
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
、providerがpostgresqlとなっていますが、SQLiteの場合はsqliteになってます。
また.envファイルも追加される。こちらにDATABASE_URLという変数があるのでこちらにSupabase作成時のデータベースのURLに変更する。
スキーマを設定する
今回はTODOを作成すると仮定してTodoという名前でスキーマを設定する。
こちらは、schema.prismaファイルに記載。
model Todo {
id Int @id @default(autoincrement())
title String
date DateTime @default(now())
done Boolean @default(false)
}
IDをプライマリーキーに設定して、autoincrementで自動で番号を割り振ります。
あとはTODOのタイトル、投稿時間とTODOを終わらせたかどうかのどうかのtrueかfalseで判定する為のdoneを用意します。
マイグレーションを実行する
スキーマを設定したらマイグレーションを実行してSupabaseにテーブルを作成する。
その為のコマンドとして下記のコマンドを実行する。
npx prisma migrate dev --name init
成功すると下記のようにSupabaseにテーブルが作成されています。
とりあえず、これでNext.jsにPrismaをインストールと設定まで終わったので、次は実際にPrismaを利用してみる。
続きはこちら
参考サイト
Discussion
この公式の記事にも書いてあるとおり、 Supabase の接続には Transaction Mode と Session Mode の二種類があり、通常のクエリには Transaction Mode を使い、テーブルの構造の変更などには Session Mode を使うべきです。
"supabase prisma" でグーグル検索するとこの記事が一番上に出てくるので、このあと見る人たちのためにもこちらの記事を参考にして補足を追加してほしいです。
要点だけをまとめると
DATABASE_URLとDIRECT_URLで Transaction Mode と Session Mode のコネクションURLを分ける。pgbouncer=trueをURLで指定する。connection_limit=1も指定する。