Using Prisma ORM with Next.js 15, TypeScript, and PostgreSQL

Introduction Prisma ORM is a powerful and type-safe database toolkit for Node.js and TypeScript. It simplifies database access and management, making it a great choice for Next.js applications. This guide will walk you through setting up Prisma with Next.js 15, TypeScript, and a PostgreSQL database. Prerequisites Ensure you have the following installed: Node.js (v16+) PostgreSQL npm or yarn Step 1: Setting Up Next.js 15 Project First, create a new Next.js 15 project with TypeScript: npx create-next-app@latest my-prisma-app --typescript cd my-prisma-app Step 2: Installing Prisma and PostgreSQL Driver Install Prisma and the PostgreSQL client library: npm install @prisma/client npm install --save-dev prisma npm install pg Step 3: Initializing Prisma Run the following command to initialize Prisma: npx prisma init This command: Creates a prisma directory with a schema.prisma file Generates an .env file for database configuration Step 4: Configuring PostgreSQL Connection In the .env file, update the database URL: DATABASE_URL="postgresql://USER:PASSWORD@localhost:5432/DATABASE_NAME" Replace USER, PASSWORD, and DATABASE_NAME with your PostgreSQL credentials. Step 5: Defining the Prisma Schema Edit prisma/schema.prisma to define a model: model User { id String @id @default(uuid()) name String email String @unique posts Post[] } model Post { id String @id @default(uuid()) title String content String? author User @relation(fields: [authorId], references: [id]) authorId String createdAt DateTime @default(now()) } Step 6: Running Migrations Generate and apply migrations: npx prisma migrate dev --name init This will create the database tables. Step 7: Generating Prisma Client Run the following command to generate the Prisma Client: npx prisma generate This command creates TypeScript types for your database models. Step 8: Using Prisma in Next.js API Route Create an API route in pages/api/users.ts: import { NextApiRequest, NextApiResponse } from 'next'; import { PrismaClient } from '@prisma/client'; const prisma = new PrismaClient(); export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method === 'GET') { const users = await prisma.user.findMany(); return res.status(200).json(users); } } Step 9: Seeding the Database (Optional) Add a prisma/seed.ts file: import { PrismaClient } from '@prisma/client'; const prisma = new PrismaClient(); async function main() { await prisma.user.create({ data: { name: 'John Doe', email: 'johndoe@example.com', }, }); } main() .catch((e) => console.error(e)) .finally(async () => await prisma.$disconnect()); Run the seed command: npx prisma db seed Step 10: Prisma Studio (GUI for DB Management) Launch Prisma Studio: npx prisma studio This opens a web interface to interact with your database. List of Prisma Commands Command Description npx prisma init Initializes Prisma in the project. npx prisma migrate dev --name init Creates and applies a new migration. npx prisma generate Generates the Prisma client for TypeScript. npx prisma studio Opens Prisma Studio for database management. npx prisma db seed Runs the seed script to populate the database. npx prisma migrate status Shows the current migration status. npx prisma format Formats the Prisma schema file. npx prisma validate Validates the Prisma schema file. Conclusion You have successfully set up Prisma ORM with Next.js 15, TypeScript, and PostgreSQL. This setup allows you to interact with your database using a fully typed API, making development more efficient and secure.

Feb 25, 2025 - 06:45

Using Prisma ORM with Next.js 15, TypeScript, and PostgreSQL

Introduction

Prisma ORM is a powerful and type-safe database toolkit for Node.js and TypeScript. It simplifies database access and management, making it a great choice for Next.js applications. This guide will walk you through setting up Prisma with Next.js 15, TypeScript, and a PostgreSQL database.

Prerequisites

Ensure you have the following installed:

Node.js (v16+)
PostgreSQL
npm or yarn

Step 1: Setting Up Next.js 15 Project

First, create a new Next.js 15 project with TypeScript:

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

Step 2: Installing Prisma and PostgreSQL Driver

Install Prisma and the PostgreSQL client library:

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

Step 3: Initializing Prisma

Run the following command to initialize Prisma:

npx prisma init

This command:

Creates a prisma directory with a schema.prisma file
Generates an .env file for database configuration

Step 4: Configuring PostgreSQL Connection

In the .env file, update the database URL:

DATABASE_URL="postgresql://USER:PASSWORD@localhost:5432/DATABASE_NAME"

Replace USER, PASSWORD, and DATABASE_NAME with your PostgreSQL credentials.

Step 5: Defining the Prisma Schema

Edit prisma/schema.prisma to define a model:

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

model Post {
  id        String @id @default(uuid())
  title     String
  content   String?
  author    User   @relation(fields: [authorId], references: [id])
  authorId  String
  createdAt DateTime @default(now())
}

Step 6: Running Migrations

Generate and apply migrations:

npx prisma migrate dev --name init

This will create the database tables.

Step 7: Generating Prisma Client

Run the following command to generate the Prisma Client:

npx prisma generate

This command creates TypeScript types for your database models.

Step 8: Using Prisma in Next.js API Route

Create an API route in pages/api/users.ts:

import { NextApiRequest, NextApiResponse } from 'next';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    const users = await prisma.user.findMany();
    return res.status(200).json(users);
  }
}

Step 9: Seeding the Database (Optional)

Add a prisma/seed.ts file:

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function main() {
  await prisma.user.create({
    data: {
      name: 'John Doe',
      email: 'johndoe@example.com',
    },
  });
}

main()
  .catch((e) => console.error(e))
  .finally(async () => await prisma.$disconnect());

Run the seed command:

npx prisma db seed

Step 10: Prisma Studio (GUI for DB Management)

Launch Prisma Studio:

npx prisma studio

This opens a web interface to interact with your database.

List of Prisma Commands

Command	Description
`npx prisma init`	Initializes Prisma in the project.
`npx prisma migrate dev --name init`	Creates and applies a new migration.
`npx prisma generate`	Generates the Prisma client for TypeScript.
`npx prisma studio`	Opens Prisma Studio for database management.
`npx prisma db seed`	Runs the seed script to populate the database.
`npx prisma migrate status`	Shows the current migration status.
`npx prisma format`	Formats the Prisma schema file.
`npx prisma validate`	Validates the Prisma schema file.

Conclusion

You have successfully set up Prisma ORM with Next.js 15, TypeScript, and PostgreSQL. This setup allows you to interact with your database using a fully typed API, making development more efficient and secure.