Skip to content
Merged
Changes from 1 commit
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
26 changes: 19 additions & 7 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 @@ -249,7 +250,7 @@ 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`
**Next.js 15.2.0 or 15.2.1**: There is a known [issue](https://github.com/vercel/next.js/issues/76497) with Turbopack on these specific versions. Remove Turbopack from your dev script by updating your `package.json`:
```json file=package.json
"script":{
//delete-start
Expand All @@ -260,7 +261,18 @@ Before starting the development server, note that if you are using Next.js v15.2
//add-end
}
```
This change is not needed on any versions before or after.

**Next.js 16+**: Turbopack is now stable and enabled by default. The `--turbopack` flag is no longer used. If you encounter issues and need to use Webpack instead, use the `--webpack` flag:
```json file=package.json
"script":{
//delete-start
"dev": "next dev",
//delete-end
//add-start
"dev": "next dev --webpack",
//add-end
}
```

:::

Expand Down
Loading