🙌

Next.js Supabase Prisma を使用してアプリを作る 2/6 覚書

2022/06/08に公開

https://themodern.dev/courses/build-a-fullstack-app-with-nextjs-supabase-and-prisma-322389284337222224
気になったところだけ書くので実際にされる方は↑から進めてください。

DB設定

Supabase プロジェクト作成

見たままだったので省略

なぜ Next.js で Prisma を使用するのか

DB の操作を簡略化するため。
ORM によって JS で DB の CRUD 処理ができるため。
Next.js ↔ Prisma ↔ Supabase

// 特定のユーザーのクエリ.
await prisma.user.findUnique({
  email: "elon@spacex.com"
})

prisma を初期化

コマンドラインから使えるようになる。
インストール
npm i -D prisma
初期化
npx prisma init
/prisma/scheme.prisma が作成される。
ここにDBに接続するための情報、アプリのデータモデル、DBモデルを指定

Supabase を Prisma に接続

prisma
   └ schema.prisma
schema.prisma
// デフォルトにしておく.JS環境に必要.
generator client {
  provider = "prisma-client-js"
}
// provider は DBタイプ.
// url が DB のURL. .env ファイルの DATABASE_URL を読み取る.
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

.evn の DATABASE_URL=を変更して設定完了

Discussion