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
1
npx create-next-app@latest project-name

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

Copy
1
2
cd project-name
npm run dev

Install Prisma Client

Install Prisma and its client library:

Copy
1
npm install prisma @prisma/client

Or, if using yarn:

Copy
1
yarn add prisma @prisma/client

Configure Prisma Schema

Initialize Prisma to generate the necessary files:

Copy
1
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
1
DATABASE_URL="postgresql://USER:PASSWORD@HOST:PORT/DATABASE"

Generating Prisma Client

Run Prisma Init

Copy
1
npx prisma init

Generate Prisma Client

After defining your schema, generate the Prisma Client:

Copy
1
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
1
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 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
1
2
3
4
5
6
7
8
9
10
// 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 findMany and findUnique:

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

Mutating Data

Use create, update, and delete for data mutations:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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 },
})

Using Prisma Studio

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

Copy
1
npx prisma studio

Best Practices for Prisma Client in Next.js

Single PrismaClient Instance

Create a prisma.js file in the lib folder:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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

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 .env 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:

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

Schema Exposure in Client-Side

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