How to Use Prisma with Next.js: Simple Setup and Example

To use Prisma with Next.js, install Prisma and its client, define your data model in schema.prisma, then generate the client. Import the Prisma client in your API routes or server components to query your database easily.

Syntax

Here is the basic syntax to set up Prisma with Next.js:

• Install Prisma CLI and client.
• Create prisma/schema.prisma to define your database models.
• Run prisma generate to create the Prisma client.
• Import and instantiate Prisma client in your Next.js API routes or server components.
• Use Prisma client methods like findMany, create, etc., to interact with your database.

bash and javascript

npm install @prisma/client prisma

// prisma/schema.prisma
// Define your data model
model User {
  id    Int     @id @default(autoincrement())
  name  String
  email String  @unique
}

// Generate client
npx prisma generate

// pages/api/users.js
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export default async function handler(req, res) {
  const users = await prisma.user.findMany();
  res.json(users);
}

Example

This example shows a Next.js API route that fetches all users from a SQLite database using Prisma.

prisma and javascript

// prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

model User {
  id    Int    @id @default(autoincrement())
  name  String
  email String @unique
}

// Run these commands in terminal:
// npx prisma migrate dev --name init
// npx prisma generate

// pages/api/users.js
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export default async function handler(req, res) {
  try {
    const users = await prisma.user.findMany();
    res.status(200).json(users);
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch users' });
  }
}

Output

[]

Common Pitfalls

Common mistakes when using Prisma with Next.js include:

• Creating multiple PrismaClient instances causing connection issues. Always reuse a single instance.
• Not running prisma generate after changing the schema.
• Forgetting to run migrations to update the database.
• Using Prisma client in client-side code, which is not supported.

javascript

// Wrong: Creating PrismaClient inside handler (creates many instances)
export default async function handler(req, res) {
  const prisma = new PrismaClient();
  const users = await prisma.user.findMany();
  await prisma.$disconnect();
  res.json(users);
}

// Right: Create PrismaClient once outside handler
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export default async function handler(req, res) {
  const users = await prisma.user.findMany();
  res.json(users);
}

Quick Reference

Summary tips for using Prisma with Next.js:

• Define your data model in schema.prisma.
• Run npx prisma migrate dev to apply schema changes.
• Generate Prisma client with npx prisma generate.
• Use a single PrismaClient instance in API routes or server components.
• Do not use Prisma client in browser code.

Key Takeaways

Install Prisma and define your data model in schema.prisma before generating the client.

Use a single PrismaClient instance outside API handlers to avoid connection issues.

Run migrations and generate the client after schema changes to keep database and code in sync.

Use Prisma only in server-side code like API routes or server components, never in client-side code.

Handle errors gracefully in API routes to avoid crashing your Next.js app.