Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 6 additions & 23 deletions content/800-guides/090-nextjs.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: 'How to use Prisma ORM and Prisma Postgres with Next.js'
metaTitle: 'How to use Prisma ORM and Prisma Postgres with Next.js 15 and Vercel'
metaTitle: 'How to use Prisma ORM and Prisma Postgres with Next.js and Vercel'
description: 'Learn how to use Prisma ORM in a Next.js app and deploy it to Vercel'
sidebar_label: 'Next.js'
image: '/img/guides/prisma-nextjs-cover.png'
Expand All @@ -22,12 +22,12 @@ community_section: true

</details>

This guide shows you how to use Prisma with Next.js 15, a fullstack React framework. You'll learn how to create a [Prisma Postgres](/postgres/) instance, set up Prisma ORM with Next.js, handle migrations, and deploy your application to Vercel.
This guide shows you how to use Prisma with Next.js, a fullstack React framework. You'll learn how to create a [Prisma Postgres](/postgres/) instance, set up Prisma ORM with Next.js, handle migrations, and deploy your application to Vercel.

You can find a [deployment-ready example on GitHub](https://github.com/prisma/prisma-examples/blob/latest/orm/nextjs).

## Prerequisites
- [Node.js 20+](https://nodejs.org)
- [Node.js](https://nodejs.org) v20.19+, v22.12+, or v24.0+
- A Vercel account (if you want to deploy your application)

## 1. Set up your project
Expand Down Expand Up @@ -89,10 +89,11 @@ You'll need to answer a few questions while setting up your Prisma Postgres data
This will create:

- A `prisma` directory with a `schema.prisma` file.
- A `prisma.config.ts` file for configuring Prisma
- A `prisma.config.ts` file for configuring Prisma.
- A Prisma Postgres database.
- A `.env` file containing the `DATABASE_URL` at the project root.
- An `output` directory for the generated Prisma Client as `app/generated/prisma`.

The `app/generated/prisma` output directory for the generated Prisma Client will be created when you run `prisma generate` or `prisma migrate dev` in a later step.

### 2.2. Define your Prisma Schema

Expand Down Expand Up @@ -246,24 +247,6 @@ export default defineConfig({
});
```


:::warning

Before starting the development server, note that if you are using Next.js v15.2.0 or v15.2.1, do not use Turbopack as there is a known [issue](https://github.com/vercel/next.js/issues/76497). Remove Turbopack from your dev script by updating your `package.json`
```json file=package.json
"script":{
//delete-start
"dev": "next dev --turbopack",
//delete-end
//add-start
"dev": "next dev",
//add-end
}
```
This change is not needed on any versions before or after.

:::

Finally, run `prisma db seed` to seed your database with the initial data we defined in the `seed.ts` file.

Run the seed script:
Expand Down
Loading