[Bug] Gedebug

Oke langsung saja pertama kalian buat dulu project nextjs nya.

npx create-next-app@latest

Jika sudah install Prisma nya ke project nexjs kalian.

npm i -D prisma

Install juga prisma client jika dalam konteks ini @prisma/client akan berfungsi sebagai ORM (Object-Relational Mapping) untuk berinteraksi dengan database.

npm i @prisma/client

Lalu untuk membuat Config prisma ketikan perintah berikut.

npx prisma init

Jika sudah kalian akan melihat folder "prisma" dan file ".env"

Nah sekarang saatnya menghubungkan database ke supabase, pertama kalian buat dulu akun dan projectnya di supabase https://supabase.com

Jika sudah klik link/tombol bertulisan Connect 

karena dalam hal ini kita menggunakan ORM Prisma maka pilih yang ORMs dan pada .env.lcoal kalian copy dan masukan ke .env yang ada pada project nextjs kalian, contoh seperti berikut ini.

# Connect to Supabase via connection pooling with Supavisor.

DATABASE_URL="postgresql://postgres.ewvyhblrqcpgwnjrmgxn:[YOUR-PASSWORD]@aws-0-ap-southeast-1.pooler.supabase.com:6543/postgres?pgbouncer=true"

# Direct connection to the database. Used for migrations.

DIRECT_URL="postgresql://postgres.ewvyhblrqcpgwnjrmgxn:[YOUR-PASSWORD]@aws-0-ap-southeast-1.pooler.supabase.com:5432/postgres"

pada bagian [YOUR-PASSWORD] ganti dengan password kalian saat membuat project di supabase.

lalu buka file /prisma/schema.prisma dan ganti kode baris berikut.

datasource db {

  provider = "postgresql"

  url      = env("DATABASE_URL")

}

Dengan yang ada pada supabase.

datasource db {

  provider  = "postgresql"

  url       = env("DATABASE_URL")

  directUrl = env("DIRECT_URL")

}

Lalu kalian bisa menambahkan Table database agar memudahkanya dan menguji apakah sudah terhubung dengan baik. Dalam contoh kasus berikut ini kita akan membuat table dengan nama "Contact" dan isi datanya sekaligus. Kamu bisa meletakanya tepat dibawah kode database sebelumnya pada /prisma/schema.prisma

model Contact {

  id String @id @default(cuid())

  name String

  phone String

  createdAt DateTime @default(now())

  updateAt DateTime @updatedAt

}

Jika sudah kalian save sekarang ketikan perintah berikut pada terminal.

npx prisma migrate dev

Lalu kamu akan diminta memberikan nama pada migrasi baru tersebut, dalam hal ini biasanya saya memberikan nama "init" saja. Jika muncul hal berikut pada terminal.

Your database is now in sync with your schema.

Itu artinya kamu bisa melihatnya pada table di supabase apakah sudah muncul table dengan nama "Contact" dan jika sudah muncul itu artinya kamu sudah berhasil menghubungkan project nexjs14 kamu dengan supabase menggunakan prisma. 

Apabila kamu saat pertama kali upload ke hosting atau sebagainya biasanya database tidak terhubung dengan benar, kamu bisa mengetikan perintah berikut.

npx prisma generate

Atau jika kamu menemukan kendala mungkin postingan dibawah ini bisa membantu memberikan solusi.

Vercel Deploy Error "Prisma's auto-generation isn't triggered."