個人開発でSupabaseを使ってみようと思い、Supabase Localに対してPrismaでDB操作するまでのセットアップを雑メモとして残しておきます。（備忘録なので結構雑です...mm）
既に作成済みのNext.jsプロジェクトに対してセットアップをしていきます。

私はMacを使用しています。よって、この備忘録はmacOS前提となります

前提条件

Node.js(v18以上)
npm 使用可能
Dockerが起動している

Supabase CLIのインストール

brew install supabase/tap/supabase

Supabaseが正常に入ったか確認

supabase --version

Supabaseプロジェクトの初期化

supabase init

supabaseというディレクトリが作成され、基本的なsupabaseプロジェクトが作成されるかと思います。

Supabaseのローカル環境を起動

supabase start

初期起動時は大量のDockerコンテナのダウンロードとセットアップが行われます。
そこそこ長いです

立ち上がると以下のように開発に必要になるSupabaseローカル環境の接続情報が表示されます

$ supabase start
Applying migration 20240101000000_initial_schema...
Seeding data supabase/seed.sql...
Started supabase local development setup.

         API URL: http://localhost:54321
          DB URL: postgresql://postgres:postgres@localhost:54322/postgres
      Studio URL: http://localhost:54323
     Inbucket URL: http://localhost:54324
        anon key: eyJhbGciOi............
service_role key: eyJhbGciOi............

そこのDB URLを用いるのでメモしておきましょう。

Prismaのセットアップ

npm install prisma @prisma/client
npm install -D prisma

prismaを初期化すると、supabaseと同様にprismaディレクトリが作成され、その中にschema.prismaが作成されます。schema.prismaにDBへの接続設定やmodelの定義を行うことになります。

環境変数設定

.envファイルを以下のように編集しましょう

# .env
DATABASE_URL=postgresql://postgres:postgres@localhost:54322/postgres

Next.js用の環境変数も追加しましょう(.env.local)

# .env.local
NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key_here
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key_here

anon_key, service_role_keyはsupabase statusで確認できます

Prismaスキーマ定義

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

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

// 例（ユーザー）
model User {
  id          String   @id @db.Uuid
  email       String   @unique @db.VarChar(255)
  username    String   @unique @db.VarChar(50)
  displayName String?  @map("display_name") @db.VarChar(100)
  profileImageUrl String? @map("profile_image_url")
  createdAt   DateTime @default(now()) @map("created_at")
  updatedAt   DateTime @updatedAt @map("updated_at")

  @@map("users")
}

初回マイグレーション

npx prisma migrate dev --name init

テーブル作成確認

Supabase Studioで確認

ターミナルでsupabase statusを実行すると、Supabaseローカル環境の接続情報を確認できます。
そこのStudio URLのhttp://localhost:54323にアクセスし、ローカルのSupabaseダッシュボードからUserテーブルが作成されていることを確認しましょう。

Prisma Studioで確認

npx prisma studio

を実行すると、prisma studioが立ち上がるので、ブラウザでhttp://localhost:5555にアクセスし、Userテーブルが作成されていることを確認しましょう。