FrontendNext.jsPrismaTypeScriptDatabaseFull Stack

Next.js with Prisma ORM: Full-Stack Type-Safe Database Access

Build a type-safe full-stack Next.js application with Prisma ORM — schema modeling, migrations, queries, and Server Actions integration.

Abdur Razzak

Abdur Razzak

Full-Stack Web Developer

December 12, 2024 11 min read

Why Prisma with Next.js?

Prisma is a next-generation ORM for Node.js that generates a fully type-safe database client from your schema. When combined with Next.js and TypeScript, you get a full-stack application where your database types flow through your entire codebase — from database schema to API response to React component props — with zero manual type definitions. This dramatically reduces bugs at the data layer.

Setting Up Prisma

Install Prisma: npm install prisma @prisma/client. Initialize with npx prisma init, which creates a prisma/schema.prisma file and sets up your DATABASE_URL in .env. Prisma supports PostgreSQL, MySQL, SQLite, MongoDB, and SQL Server. Define your models in schema.prisma with fields, types, and relations. Run npx prisma migrate dev to create the database tables and generate the Prisma Client.

Defining Your Schema

The Prisma schema language is intuitive and declarative. Define models with fields and their types (String, Int, DateTime, Boolean). Add @id for primary keys, @default for default values, @unique for unique constraints, and @relation for foreign key relationships. The @@index directive adds database indexes for performance. Prisma validates your schema and catches errors before running migrations.

Querying with Prisma Client

The generated Prisma Client provides type-safe methods for every model. Use prisma.user.findMany() with where, select, include, orderBy, skip, and take options for filtering, selecting fields, including relations, sorting, and pagination. The select option prevents over-fetching by limiting which fields are returned. Use prisma.user.create(), update(), delete() for mutations.

Prisma in Next.js Server Components and Actions

In Next.js Server Components, import and use the Prisma Client directly — no API route needed. Create a singleton prisma instance in lib/prisma.ts to avoid exhausting database connections in development. In Server Actions, run your Prisma queries inside the action function, then call revalidatePath() to refresh the cached page data. This creates a clean full-stack data flow without any client-server boilerplate.

Migrations and Production Deployment

In development, use npx prisma migrate dev to create and apply migrations. In production, run npx prisma migrate deploy (non-interactive, safe for CI/CD). Add the migrate deploy command to your deployment script before starting the Next.js server. Use Prisma Studio (npx prisma studio) as a visual database browser during development. In production, never run migrate dev — it can reset your data in some scenarios.

Share this article

All posts
#Next.js#Prisma#TypeScript#Database#Full Stack
Abdur Razzak — Full Stack Web Developer

Full-Stack Expert

MERN · React · Next.js · WordPress