Script Valley
Next.js: Full-Stack React Applications
Database Integration with PrismaLesson 4.1

How to set up Prisma with Next.js and PostgreSQL

Prisma installation, prisma init, DATABASE_URL, schema.prisma, provider configuration, prisma generate, PrismaClient singleton, env files

Installing and Initializing Prisma

Prisma is an ORM that gives you type-safe database access. Install it and initialize:

npm install prisma @prisma/client
npx prisma init --datasource-provider postgresql

This creates a prisma/schema.prisma file and a .env file. Set your database URL in .env:

DATABASE_URL="postgresql://user:password@localhost:5432/mydb"

The Singleton Client Pattern

In development, Next.js hot-reloads can create multiple PrismaClient instances and exhaust database connections. Use a singleton:

// lib/prisma.ts
import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }

export const prisma =
  globalForPrisma.prisma ||
  new PrismaClient({ log: ['query'] })

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

In production, each server instance creates one client. In development, the global object persists across hot-reloads.

Generating the Client

npx prisma generate   # Generate TypeScript types from schema
npx prisma db push    # Push schema to DB (for development)
npx prisma migrate dev # Create a migration file (for production)

Run prisma generate every time you change the schema. The generated client is type-safe — TypeScript will catch queries that reference nonexistent fields.

Up next

How to define models and relations in a Prisma schema

Sign in to track progress