How to Integrate Prisma in a Next.js Application

Prisma is a modern ORM (Object-Relational Mapping) tool that simplifies database interactions in modern web applications. Integrating Prisma with a Next.js application can enable efficient and type-safe database operations. This guide walks you through the steps to set up Prisma with Next.js.

Prerequisites

Before getting started, ensure you have the following:

1. Node.js installed on your system.
2. Next.js application already set up.
3. A database to connect to (e.g., PostgreSQL, MySQL, MongoDB, SQLite, etc.).

Step 1: Install Prisma

First, install Prisma and its CLI in your Next.js project:

npm install prisma --save-dev
npm install @prisma/client

Next, initialize Prisma in your project:

npx prisma init

This will create two important files:

• prisma/schema.prisma: Defines your database schema.
• .env: Stores your database connection URL.

Step 2: Configure the Database Connection

Update the DATABASE_URL in the .env file with your database connection string. For example:

DATABASE_URL="postgresql://username:password@localhost:5432/mydatabase"

Replace username, password, and mydatabase with your actual database credentials.

Step 3: Define Your Schema

Edit the prisma/schema.prisma file to define your database schema. For example, to create a User model:

generator client {
  provider = "prisma-client-js"
}
 
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
 
model User {
  id        Int      @id @default(autoincrement())
  name      String
  email     String   @unique
  createdAt DateTime @default(now())
}

Step 4: Migrate the Database

To apply the schema changes to your database, run the following commands:

npx prisma migrate dev --name init

This will:

1. Generate a migration file.
2. Apply the migration to your database.

Step 5: Generate the Prisma Client

Prisma Client is automatically generated when you run migrations, but you can also generate it manually:

npx prisma generate

Step 6: Use Prisma in Your Next.js Application

Prisma can be used in API routes or server-side functions. For example, create a new API route to fetch all users:

1. Create a file: pages/api/users.js.
2. Add the following code:

import { PrismaClient } from '@prisma/client';
 
const prisma = new PrismaClient();
 
export default async function handler(req, res) {
  if (req.method === 'GET') {
    const users = await prisma.user.findMany();
    res.status(200).json(users);
  } else {
    res.setHeader('Allow', ['GET']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

Step 7: Set Up Prisma Client for Reusability

To avoid creating multiple instances of Prisma Client, set it up as a singleton:

1. Create a new file: lib/prisma.js.
2. Add the following code:

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;

Now, you can import prisma from lib/prisma wherever needed.

Step 8: Query Data in Pages

You can query data server-side and pass it as props to your pages. For example:

1. Create a new page: pages/users.js.
2. Add the following code:

import prisma from '../lib/prisma';
 
export async function getServerSideProps() {
  const users = await prisma.user.findMany();
  return {
    props: { users },
  };
}
 
export default function Users({ users }) {
  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name} ({user.email})</li>
        ))}
      </ul>
    </div>
  );
}

Step 9: Prisma Studio (Optional)

To visually inspect your database, use Prisma Studio:

npx prisma studio

This opens a web-based interface for your database.

Conclusion

You’ve successfully integrated Prisma with your Next.js application! From here, you can:

• Add more models to your schema.
• Use Prisma Client for advanced queries.
• Scale your application with type-safe database interactions.

Prisma and Next.js together provide a powerful combination for building modern, full-stack applications. Happy coding!