Configure Prisma ORM with Next.js and Supabase
Setting up environment variables
In your .env file, put the following code, In place of password Replace it with your Supabase password
# Connection pooling URL
DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@aws-1-eu-central-1.pooler.supabase.com:6543/postgres?pgbouncer=true"
# Direct database connection URL (for migrations)
DIRECT_URL="postgresql://postgres:[YOUR-PASSWORD]@aws-1-eu-central-1.pooler.supabase.com:5432/postgres"
Installation commands to install Prisma ORM
Next, Install the dependencies that are needed for Prisma ORM.
# Prisma CLI (dev dependency)
npm install prisma --save-dev
# Prisma Client
npm install @prisma/client
# PostgreSQL adapter and dotenv support
npm install @prisma/adapter-pg pg dotenv
npm install --save-dev @types/pg
Initialize Prisma
# Initialize Prisma project (creates prisma/ folder and .env)
npx prisma init
Prisma Configuration
<pre><code class="language-typescript">
// prisma.config.ts
import "dotenv/config";
import { defineConfig } from "prisma/config";
export default defineConfig({
schema: "prisma/schema.prisma",
migrations: {
path: "prisma/migrations",
},
datasource: {
url: process.env["DIRECT_URL"],
},
});
Prisma Schema
Create your models here, These are the tables that you will create here
// prisma/schema.prisma
generator client {
provider = "prisma-client-js"
output = "../lib/generated/prisma"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
directUrl = env("DIRECT_URL")
}
model Transaction {
id BigInt @id @map("id") @default(autoincrement())
createdAt DateTime @map("created_at") @default(now())
amount Float? @map("amount")
type String? @map("typetext")
description String? @map("description")
@@map("transactions") // actual table name in Supabase
}
Push Schema to Supabase
Finally we push the tables to our Supabase db
# Generate Prisma Client from your schema
npx prisma generate
# Push schema to Supabase (sync database without migrations)
npx prisma db push