Supabase + Prisma: The Perfect PostgreSQL Stack for Next.js

Introduction

Supabase gives you a fully managed PostgreSQL database with a generous free tier, real-time subscriptions, row-level security, and a built-in Auth system. Pair it with Prisma and you get a type-safe ORM that auto-generates TypeScript types from your schema — the ultimate developer experience.

Step 1: Create a Supabase Project

1. Go to supabase.com and sign up.
2. Click New Project, choose a name, region, and strong database password.
3. Wait ~2 minutes for provisioning.
4. Go to Settings → Database and copy the Connection String (URI).

Step 2: Configure Prisma

Add the connection string to your .env.local:

DATABASE_URL="postgresql://postgres:[PASSWORD]@db.[REF].supabase.co:5432/postgres"

Then update prisma/schema.prisma:

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

Step 3: Push Your Schema

npx prisma db push

Prisma reads your schema file and creates all the tables in Supabase automatically. No migrations file needed for rapid prototyping.

Step 4: Seed Your Data

npm run db:seed

Your seed script runs and populates the database with initial rows. You can verify everything in Supabase Dashboard → Table Editor.

Step 5: Query Data in Next.js

import { db } from '@/lib/db';

const posts = await db.blog.findMany({
  where: { published: true },
  orderBy: { createdAt: 'desc' },
});

Prisma's generated client is fully typed — autocomplete works for every field and relation.

Conclusion

Supabase + Prisma removes every database management pain point. You get backups, monitoring, and scalability for free — letting you focus 100% on building features.