How to Set Up Next.js with Prisma Client in Easy Steps

Key Takeaways

• Properly set up a Next.js project with Prisma by initializing the project, installing the Prisma Client, and configuring the Prisma schema to ensure efficient database interactions.
• Utilize methods like Server-Side Rendering (SSR) and Static Site Generation (SSG) to fetch data from the database effectively, enhancing application performance and flexibility.
• Adopt best practices such as maintaining a single PrismaClient instance, implementing connection pooling, and leveraging TypeScript for type safety to optimize the use of Prisma Client in a Next.js application.

How to Set Up Your Next.js Project with Prisma

Initialize a Next.js Project

To start, create a new Next.js project using the create-next-app command:

Copy
npx create-next-app@latest project-name

After creating the project, navigate to the new project folder and start the development server:

Copy
cd project-name
npm run dev

Install Prisma Client

Install Prisma and its client library:

Copy
npm install prisma @prisma/client

Or, if using yarn:

Copy
yarn add prisma @prisma/client

Configure Prisma Schema

Initialize Prisma to generate the necessary files:

Copy
npx prisma init

This command creates a prisma folder with a schema file (schema.prisma) and a .env file for environment variables.

Connecting to Your Database

Setup PostgreSQL Database

Ensure PostgreSQL is set up locally or on a cloud platform like AWS RDS or Heroku. Use the connection string format: postgresql://USER:PASSWORD@HOST:PORT/DATABASE.

Update .env File

Add the PostgreSQL connection string to .env:

Copy
DATABASE_URL="postgresql://USER:PASSWORD@HOST:PORT/DATABASE"

Generating Prisma Client

Run Prisma Init

Copy
npx prisma init

Generate Prisma Client

After defining your schema, generate the Prisma Client:

Copy
npx prisma generate

Defining Models in Prisma Schema

Define your models in schema.prisma. For instance, here’s a basic example of a User model:

Copy
model User {
  id    Int    @id @default(autoincrement())
  name  String
  email String @unique
  posts Post[]
}

model Post {
  id        Int    @id @default(autoincrement())
  title     String
  content   String?
  authorId  Int
  author    User    @relation(fields: [authorId], references: [id])
}

Running Migrations

To sync your models with the database:

Copy
npx prisma migrate dev --name init

Fetching Data in Next.js

Server-Side Rendering (SSR) with Prisma

Use getServerSideProps to fetch data with Prisma for SSR:

Copy
// pages/index.js

import prisma from '../lib/prisma'

export async function getServerSideProps() {
  const users = await prisma.user.findMany()
  return { props: { users } }
}

export default function Home({ users }) {
  return (
    <div>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  )
}

Static Site Generation (SSG) with Prisma

For SSG, use getStaticProps:

Copy
// pages/posts.js

import prisma from '../lib/prisma'

export async function getStaticProps() {
  const posts = await prisma.post.findMany()
  return { props: { posts } }
}

export default function Posts({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  )
}

API Routes with Prisma

To create API routes for CRUD operations:

Copy
// pages/api/users.js

import prisma from '../../lib/prisma'

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

Handling Database Queries

Querying Data

To retrieve data, use functions like and :

Mutating Data

Use , , and for data mutations:

Using Prisma Studio

To open Prisma Studio for an interactive interface to manage data:

Best Practices for Prisma Client in Next.js

Single PrismaClient Instance

Create a file in the folder:

Connection Pooling

Prisma Accelerate or native pooling libraries are helpful for managing connections in serverless environments.

Type Safety

Use TypeScript with Prisma to improve type safety. Prisma automatically generates TypeScript types based on your schema, making data handling safer.

Deploying Your Next.js App

Deployment on Vercel

Deploying Prisma with Next.js on Vercel is straightforward:

1. Add your PostgreSQL credentials to Vercel's environment settings.
2. Follow Vercel’s deployment setup and integrate Prisma Client.

Environment Variables

Use for local development. In production, manage variables through Vercel's Environment Variables settings.

Common Issues and Troubleshooting

Exhausted Database Connections

Maintain a single instance of Prisma Client to avoid connection exhaustion:

Schema Exposure in Client-Side

To protect schema details, avoid exposing the Prisma schema directly to the client side, and restrict sensitive data.

const users = await prisma.user.findMany()
const user = await prisma.user.findUnique({
  where: { id: 1 },
})

// Create
const newUser = await prisma.user.create({
  data: { name: 'Alice', email: 'alice@example.com' },
})

// Update
const updatedUser = await prisma.user.update({
  where: { id: 1 },
  data: { email: 'new-email@example.com' },
})

// Delete
await prisma.user.delete({
  where: { id: 1 },
})

npx prisma studio

// lib/prisma.js

import { PrismaClient } from '@prisma/client'

let prisma

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient()
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient()
  }
  prisma = global.prisma
}

export default prisma

// lib/prisma.js (as defined above)