Setup Next.js App Directory and Prisma ORM

Originally published in 2024. Examples reflect the versions used at the time. This migrated edition keeps the npm examples from the original package-manager tabs.

Introduction

This guide provides a walkthrough for setting up a Next.js application integrated with Prisma ORM. It covers the initial setup, configuration, and database operations to get started with a robust development foundation.

Installing Next.js

Setting up Next.js is straightforward. The npm example from the original guide:

npx create-next-app my-next-app
cd my-next-app

Installing Prisma

Install Prisma Client and the Prisma CLI:

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

Folder structure

The important paths in the original project structure:

prisma/
  migrations/
  schema.prisma
src/
  app/
  server/
    db.ts

Prisma setup

Configure the schema and database connection:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

model User {
  id    String  @id @default(cuid())
  name  String?
  email String? @unique

  @@map("users")
}

Using Prisma

Database migrations

Prisma Migrate helps manage database schemas through code. Create and apply migrations based on changes to the Prisma schema.

Creating migrations

When changing schema.prisma, create a migration:

npx prisma migrate dev --name describe_your_migration

This generates SQL migration files in prisma/migrations and applies them to the development database. It is intended for local development.

Applying migrations in production

To apply migrations in production without generating new ones:

npx prisma migrate deploy

Test migrations in staging or another safe environment before applying them to production.

Syncing the database schema

Prisma DB Push synchronizes the schema directly without creating migration files. This is useful during early development, but not recommended for production:

npx prisma db push

Generating Prisma Client

Generate Prisma Client from the current schema:

npx prisma generate

Run this after schema changes or after pulling changes that modify the schema.

Using Prisma in Next.js Server Components

Next.js 14 supports integrating backend operations directly within server components. This example uses a db object exported from src/server/db.ts to fetch users. It runs on the server, keeping database credentials and queries out of the browser.

Fetching user data

import { db } from "@/server/db"

export default async function UserList() {
  const users = await db.user.findMany()

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

Conclusion

These configurations establish a Next.js application with Prisma ORM. They provide a foundation for managing database operations and can be extended as the application grows.