Next.js, Prisma ORM & Supabase: Installation and Configuration
NextJS

Next.js, Prisma ORM & Supabase: Installation and Configuration

Connecting Supabase to Prisma in Next.js – Step by Step

Author
Richard Mendes
March 12, 2026 • 5 mins

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
Popular Posts

Comments (0)

No comments yet. Be the first to comment!

Latest Articles