How to Use Prisma with Next.js App Router: A Beginner’s Guide

Are you looking to integrate Prisma with your Next.js App Router? This guide will show you how to do it step-by-step, helping you manage databases and routes more efficiently in your Prisma-Next.js application.

Key Takeaways

• Integrating Prisma with Next.js App Router enhances database management and routing efficiency, ensuring a seamless user experience.
• Setting up a Next.js 13 application involves creating a well-structured app directory and using the new routing capabilities to improve application navigation.
• Prisma Accelerate optimizes database access in serverless environments, significantly enhancing application performance through features like query batching and connection pooling.

This guide provides essential insights whether it’s for deploying on services like Vercel or handling intricate data operations, ensuring that you leverage these technologies to their utmost capabilities.

Prisma and Next.js

Prisma and Next.js are praised as an ideal combination for contemporary web development. Prisma’s type-safe query builder streamlines database management, while Next.js offers versatile rendering capabilities like static site generation and server-side rendering, enabling developers to create fast and reliable applications.

When you blend Prisma into a Next.js app equipped with an App Router, it enhances your handling of database tasks and improves routing efficiency. This integration facilitates smooth data processing and navigation, elevating the user experience.

---

How to Set Up Your Next.js 13 App Directory

The first step in integrating Prisma is to establish a directory for your Next.js 13 application, setting up an orderly and sustainable project architecture.

Creating the Project

To initiate a new Next.js project, run the following command:

Copy
1
npx create-next-app@latest

After setup, you can begin organizing the architecture, adding dependencies, and configuring initial settings to align with your development needs.

Configuring Routing

Next.js 13 introduces the app directory, replacing the older pages directory to simplify route management. Routes are set up through page.tsx files. For example, to create a route for /profile, you’d set up:

Copy
1
/app/profile/page.tsx

This approach streamlines routing and enhances navigational flexibility.

---

Introducing Prisma ORM

Prisma ORM is an efficient tool for Node.js and TypeScript applications, providing a data model, automatic migration processes, and type safety. It simplifies database operations through a const prisma instance, which allows for complex data handling.

Installing Prisma CLI

To add Prisma CLI, use the following command:

Copy
1
npx prisma init --datasource-provider sqlite

This command creates a prisma folder and prepares your schema file while setting SQLite as the database. Then, generate the SQLite database and tables:

Copy
1
npx prisma migrate dev --name init

This runs migrations from your schema, ensuring proper database setup.

Configuring SQLite Database

The Prisma schema file (schema.prisma) enables you to define and manage your database architecture.

Example schema setup:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

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
  author  User    @relation(fields: [authorId], references: [id])
  authorId Int
}

After updating the schema, use migration commands to sync your database.

---

How to Integrate Prisma with Next.js App Router

With Prisma integrated, Next.js apps support real-time data updates, facilitating dynamic application development.

Creating the Prisma Client

To avoid connection problems, create a single Prisma Client instance and attach it to the global object:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
// lib/prisma.ts
import { PrismaClient } from '@prisma/client';

const globalForPrisma = global as unknown as { prisma: PrismaClient };

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

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

Using Prisma in Server Components

Prisma is ideal for Next.js 13 server components, allowing seamless data fetching. Here’s an example that fetches users and displays them:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// app/users/page.tsx
import { prisma } from '../../lib/prisma';

export default async function UsersPage() {
  const users = await prisma.user.findMany();

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

---

Implementing CRUD Operations

Prisma simplifies database record management. In Next.js, you can use Prisma with various data retrieval methods, such as getStaticProps, getServerSideProps, API routes, or a standalone server.

Creating API Routes

Manage CRUD operations efficiently by setting up API routes in the app directory. Here’s how to add a new todo item using Prisma:

Copy
1
2
3
4
5
6
7
8
9
10
11
// app/api/todo/route.ts
import { NextResponse } from 'next/server';
import { prisma } from '../../../lib/prisma';

export async function POST(request: Request) {
  const { title } = await request.json();
  const newTodo = await prisma.todo.create({
    data: { title },
  });
  return NextResponse.json(newTodo);
}

To update or delete a todo item, set up dynamic API routes:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// app/api/todo/[id]/route.ts
import { NextResponse } from 'next/server';
import { prisma } from '../../../../lib/prisma';

export async function PATCH(request: Request, { params }: { params: { id: string } }) {
  const { title } = await request.json();
  const updatedTodo = await prisma.todo.update({
    where: { id: parseInt(params.id) },
    data: { title },
  });
  return NextResponse.json(updatedTodo);
}

export async function DELETE(request: Request, { params }: { params: { id: string } }) {
  const deletedTodo = await prisma.todo.delete({
    where: { id: parseInt(params.id) },
  });
  return NextResponse.json(deletedTodo);
}

Data Mutation and Fetching

Prisma’s client methods allow data mutation, enabling you to update, add, or delete records asynchronously.

Copy
1
2
3
await prisma.todo.create({
  data: { title: 'New Task' },
});

To refresh the UI after a data change, use:

Copy
1
router.refresh();

---

Enhancing Performance with Prisma Accelerate

Prisma Accelerate optimizes query execution, cold start times, and latency via query batching. Enable it through Prisma CLI by acquiring an API key and updating your environment file.

Enabling Prisma Accelerate

Copy
1
2
# .env
PRISMA_ACCELERATE_API_KEY=your_api_key_here

This configuration ensures database query optimization.

Performance Optimization Tips

Utilize connection pooling and caching for specific query types to improve performance, especially during high-traffic periods.

---

Deploying Your Next.js and Prisma Application

To deploy your Next.js and Prisma app, consider platform-specific nuances. Set environment variables correctly and optimize build size and server-side rendering.

Preparing for Deployment

Ensure environment variables for Prisma Client’s connection with the database are configured correctly:

Copy
1
2
# .env
DATABASE_URL=your_production_database_url

Deployment Process

To deploy, you may register an account on Vercel and link your repository. For production databases, ensure Prisma Client connects to the correct environment.

---

Real-World Examples and Community Resources

Explore community resources to deepen your understanding. Real-world examples like a Todo app, CoDox, and Blitz.js exemplify advanced Next.js and Prisma integrations.

---

Final Thoughts

Combining Prisma with the Next.js App Router provides a robust toolkit for modern web development. This guide covered setup, routing configurations, CRUD operations, and performance optimization. Following these steps equips you to build scalable, resilient applications that are both performant and user-friendly.