Installing and Configuring Prisma in Next.js App Router

Photo by Hans Eiskonen on Unsplash

What is Prisma?

Prisma is an open-source database toolkit that simplifies database access and management in modern application development. It consists of three main tools:

1. Prisma ORM: An object-relational mapping (ORM) tool for Node.js and TypeScript.
2. Prisma Migrate: A declarative database schema migration system.
3. Prisma Studio: A GUI for viewing and editing data in your database.

Prisma supports various databases, including PostgreSQL, MySQL, SQLite, and MongoDB, making it a versatile choice for developers.

Step-by-Step Guide to Installing Prisma in Next.js App Router

1. Install Next.js

First, create a new Next.js project with the App Router:

npx create-next-app@latest my-prisma-app
cd my-prisma-app

Follow the prompts, ensuring you select “Yes” for using the App Router.

2. Install Prisma

Now, let’s install Prisma in your Next.js project:

npm install prisma --save-dev

This command installs Prisma CLI as a development dependency in your project.

3. Initialize Prisma

Run the following command to initialize Prisma in your project:

npx prisma init

This command does two important things:

1. Creates a new prisma directory containing a schema.prisma file. This file is where you'll define your database schema and models.
2. Creates a .env file in the root of your project. This file is used to store environment variables, including your database connection string.

4. Connect to Your Database

Open the prisma/schema.prisma file and update the datasource block to specify your database provider. For this example, we'll use PostgreSQL:

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

Next, open the .env file and update the DATABASE_URL environment variable with your database connection string:

DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

Replace johndoe, randompassword, localhost, 5432, and mydb with your actual database credentials and details.

5. Define Your Schema

In the schema.prisma file, define your data models. For example:

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

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

6. Generate Prisma Client

After defining your schema, generate Prisma Client:

npx prisma generate

This command creates a custom Prisma Client based on your schema.

7. Push Your Schema to the Database

To create the tables in your database based on your Prisma schema, run:

npx prisma db push

8. (Optional) Explore Your Data with Prisma Studio

To view and edit your data visually, you can use Prisma Studio:

npx prisma studio

This command starts Prisma Studio on http://localhost:5555.

Install and Generate Prisma Client

Prisma Client is an auto-generated database client that enables type-safe database access and reduces boilerplate code. To install it:

npm install @prisma/client

After installation, generate Prisma Clien

npx prisma generate

Setting Up Prisma Client in Next.js

Create a new directory and file for database operations:

mkdir lib && touch lib/db.ts

In lib/db.ts, paste the following code:

import { PrismaClient } from '@prisma/client'

const prismaClientSingleton = () => {
  return new PrismaClient()
}
declare const globalThis: {
  prismaGlobal: ReturnType<typeof prismaClientSingleton>;
} & typeof global;
const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()
export default prisma
if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma

This code ensures that only one instance of PrismaClient is created and reused across your application, preventing the creation of multiple instances during development hot reloads. It creates a single PrismaClient instance and saves it on the globalThis object, reusing it if it already exists.

Using Prisma in Next.js App Router

Example: Server Component

In a server component (e.g., app/page.tsx):

import prisma from '../lib/db'

export default async function Home() {
  const users = await prisma.user.findMany()
  
  return (
    <main>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  )
}

Example: Client Component

For client components, you’ll need to create an API route to fetch data. First, create an API route (e.g., app/api/users/route.ts):

import { NextResponse } from 'next/server'
import prisma from '../../../lib/db'

export async function GET() {
  const users = await prisma.user.findMany()
  return NextResponse.json(users)
}

Then, in your client component (e.g., app/client-component.tsx):

'use client'

import { useState, useEffect } from 'react'


export default function ClientComponent() {
  const [users, setUsers] = useState([])
  useEffect(() => {
    async function fetchUsers() {
      const response = await fetch('/api/users')
      const data = await response.json()
      setUsers(data)
    }
    fetchUsers()
  }, [])
  return (
    <div>
      <h2>Users (Client Component)</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  )
}

Remember to import and use this client component in a server component or page.

By following these steps, you’ll have Prisma successfully integrated into your Next.js application with the App Router, allowing for efficient and type-safe database operations.