# Next.js (Prisma ORM v7) (/docs/guides/v7/frameworks/nextjs) > For the complete Prisma documentation index, see [llms.txt](https://www.prisma.io/docs/llms.txt). A markdown version of any docs page is available by appending `.md` to its URL. Learn how to use Prisma ORM in a Next.js app and deploy it to Vercel Location: Guides > v7 > Frameworks > Next.js ## Introduction [#introduction] This guide shows you how to use Prisma with Next.js, a fullstack React framework. You'll learn how to create a [Prisma Postgres](https://www.prisma.io/docs/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). ## Quick start [#quick-start] Run one command to scaffold a Next.js project with Prisma ORM and Prisma Postgres ready to go: #### bun ```bash bunx create-prisma@stable --template next ``` #### pnpm ```bash pnpm create prisma@stable --template next ``` #### yarn ```bash yarn create prisma@stable --template next ``` #### npm ```bash npm create prisma@stable -- --template next ``` Or follow the steps below to set it up manually. ## Prerequisites [#prerequisites] * [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 [#1-set-up-your-project] From the directory where you want to create your project, run `create-next-app` to create a new Next.js app that you will be using for this guide. #### bun ```bash bunx create-next-app@latest nextjs-prisma ``` #### pnpm ```bash pnpm dlx create-next-app@latest nextjs-prisma ``` #### yarn ```bash yarn dlx create-next-app@latest nextjs-prisma ``` #### npm ```bash npx create-next-app@latest nextjs-prisma ``` You will be prompted to answer a few questions about your project. Select all of the defaults. > [!NOTE] > For reference, those are: > > * TypeScript > * ESLint > * Tailwind CSS > * No `src` directory > * App Router > * Turbopack > * No customized import alias Then, navigate to the project directory: ```bash cd nextjs-prisma ``` ## 2. Install and Configure Prisma [#2-install-and-configure-prisma] ### 2.1. Install dependencies [#21-install-dependencies] To get started with Prisma, you'll need to install a few dependencies: #### bun ```bash bun add prisma@prev tsx @types/pg --dev ``` #### pnpm ```bash pnpm add prisma@prev tsx @types/pg --save-dev ``` #### yarn ```bash yarn add prisma@prev tsx @types/pg --dev ``` #### npm ```bash npm install prisma@prev tsx @types/pg --save-dev ``` #### bun ```bash bun add @prisma/client@7 @prisma/adapter-pg dotenv pg ``` #### pnpm ```bash pnpm add @prisma/client@7 @prisma/adapter-pg dotenv pg ``` #### yarn ```bash yarn add @prisma/client@7 @prisma/adapter-pg dotenv pg ``` #### npm ```bash npm install @prisma/client@7 @prisma/adapter-pg dotenv pg ``` > [!NOTE] > If you are using a different database provider (MySQL, SQL Server, SQLite), install the corresponding driver adapter package instead of `@prisma/adapter-pg`. For more information, see [Database drivers](https://www.prisma.io/docs/orm/v7/core-concepts/supported-databases/database-drivers). Once installed, initialize Prisma in your project: #### bun ```bash bunx --bun prisma init --output ../app/generated/prisma ``` #### pnpm ```bash pnpm prisma init --output ../app/generated/prisma ``` #### yarn ```bash yarn prisma init --output ../app/generated/prisma ``` #### npm ```bash npx prisma init --output ../app/generated/prisma ``` > [!NOTE] > `prisma init` creates the Prisma scaffolding and a local `DATABASE_URL`. In the next step, you will create a Prisma Postgres database and replace that value with a direct `postgres://...` connection string. This will create: * A `prisma` directory with a `schema.prisma` file. * A `prisma.config.ts` file for configuring Prisma. * A `.env` file containing a local `DATABASE_URL` at the project root. 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. Create a Prisma Postgres database and replace the generated `DATABASE_URL` in your `.env` file with the `postgres://...` connection string from the CLI output: #### bun ```bash bunx create-db ``` #### pnpm ```bash pnpm dlx create-db ``` #### yarn ```bash yarn dlx create-db ``` #### npm ```bash npx create-db ``` ### 2.2. Define your Prisma Schema [#22-define-your-prisma-schema] In the `prisma/schema.prisma` file, add the following models: ```prisma title="prisma/schema.prisma" generator client { provider = "prisma-client" output = "../app/generated/prisma" } datasource db { provider = "postgresql" } model User { // [!code ++] id Int @id @default(autoincrement()) // [!code ++] email String @unique // [!code ++] name String? // [!code ++] posts Post[] // [!code ++] } // [!code ++] // [!code ++] model Post { // [!code ++] id Int @id @default(autoincrement()) // [!code ++] title String // [!code ++] content String? // [!code ++] published Boolean @default(false) // [!code ++] authorId Int // [!code ++] author User @relation(fields: [authorId], references: [id]) // [!code ++] } // [!code ++] ``` This creates two models: `User` and `Post`, with a one-to-many relationship between them. ### 2.3 Add `dotenv` to `prisma.config.ts` [#23-add-dotenv-to-prismaconfigts] To get access to the variables in the `.env` file, they can either be loaded by your runtime, or by using `dotenv`. Include an import for `dotenv` at the top of the `prisma.config.ts` ```typescript title="prisma.config.ts" import "dotenv/config"; // [!code ++] import { defineConfig, env } from "prisma/config"; export default defineConfig({ schema: "prisma/schema.prisma", migrations: { path: "prisma/migrations", }, datasource: { url: env("DATABASE_URL"), }, }); ``` ### 2.4. Run migrations and generate Prisma Client [#24-run-migrations-and-generate-prisma-client] Now, run the following command to create the database tables: #### bun ```bash bunx prisma migrate dev --name init ``` #### pnpm ```bash pnpm prisma migrate dev --name init ``` #### yarn ```bash yarn prisma migrate dev --name init ``` #### npm ```bash npx prisma migrate dev --name init ``` Then generate Prisma Client: #### bun ```bash bunx prisma generate ``` #### pnpm ```bash pnpm prisma generate ``` #### yarn ```bash yarn prisma generate ``` #### npm ```bash npx prisma generate ``` ### 2.5. Seed the database [#25-seed-the-database] Add some seed data to populate the database with sample users and posts. Create a new file called `seed.ts` in the `prisma/` directory: ```typescript title="prisma/seed.ts" import { PrismaClient, Prisma } from "../app/generated/prisma/client"; import { PrismaPg } from "@prisma/adapter-pg"; import "dotenv/config"; const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL, }); const prisma = new PrismaClient({ adapter, }); const userData: Prisma.UserCreateInput[] = [ { name: "Alice", email: "alice@prisma.io", posts: { create: [ { title: "Join the Prisma Discord", content: "https://pris.ly/discord", published: true, }, { title: "Prisma on YouTube", content: "https://pris.ly/youtube", }, ], }, }, { name: "Bob", email: "bob@prisma.io", posts: { create: [ { title: "Follow Prisma on Twitter", content: "https://www.twitter.com/prisma", published: true, }, ], }, }, ]; export async function main() { for (const u of userData) { await prisma.user.create({ data: u }); } } main(); ``` Now, tell Prisma how to run this script by updating your `prisma.config.ts`: ```typescript title="prisma.config.ts" import "dotenv/config"; import { defineConfig, env } from "prisma/config"; export default defineConfig({ schema: "prisma/schema.prisma", migrations: { path: "prisma/migrations", seed: `tsx prisma/seed.ts`, // [!code ++] }, datasource: { url: env("DATABASE_URL"), }, }); ``` Finally, run `prisma db seed` to seed your database with the initial data we defined in the `seed.ts` file. Run the seed script: #### bun ```bash bunx prisma db seed ``` #### pnpm ```bash pnpm prisma db seed ``` #### yarn ```bash yarn prisma db seed ``` #### npm ```bash npx prisma db seed ``` And open Prisma Studio to inspect your data: #### bun ```bash bunx prisma studio ``` #### pnpm ```bash pnpm prisma studio ``` #### yarn ```bash yarn prisma studio ``` #### npm ```bash npx prisma studio ``` ### 2.6 Set up Prisma Client [#26-set-up-prisma-client] Now that you have a database with some initial data, you can set up Prisma Client and connect it to your database. At the root of your project, create a new `lib` directory and add a `prisma.ts` file to it. ```bash mkdir -p lib && touch lib/prisma.ts ``` Now, add the following code to your `lib/prisma.ts` file: ```typescript title="lib/prisma.ts" showLineNumbers import { PrismaClient } from "../app/generated/prisma/client"; // [!code ++] import { PrismaPg } from "@prisma/adapter-pg"; // [!code ++] // [!code ++] const globalForPrisma = global as unknown as { // [!code ++] prisma: PrismaClient; // [!code ++] }; // [!code ++] // [!code ++] const adapter = new PrismaPg({ // [!code ++] connectionString: process.env.DATABASE_URL, // [!code ++] }); // [!code ++] // [!code ++] const prisma = globalForPrisma.prisma || new PrismaClient({ // [!code ++] adapter, // [!code ++] }); // [!code ++] // [!code ++] if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma; // [!code ++] // [!code ++] export default prisma; // [!code ++] ``` This file creates a Prisma Client and attaches it to the global object so that only one instance of the client is created in your application. This helps resolve issues with hot reloading that can occur when using Prisma ORM with Next.js in development mode. You'll use this client in the next section to run your first queries. ## 3. Query your database with Prisma ORM [#3-query-your-database-with-prisma-orm] Now that you have an initialized Prisma Client, a connection to your database, and some initial data, you can start querying your data with Prisma ORM. In this example, you'll make the "home" page of your application display all of your users. Open the `app/page.tsx` file and replace the existing code with the following: ```tsx title="app/page.tsx" export default async function Home() { return (

Superblog

  1. Alice
  2. Bob
); } ``` This gives you a basic page with a title and a list of users. However, that list is static with hardcoded values. Update the page to fetch the users from your database and make it dynamic. ```tsx title="app/page.tsx" import prisma from "@/lib/prisma"; export default async function Home() { const users = await prisma.user.findMany(); return (

Superblog

    {users.map((user) => (
  1. {user.name}
    2. ))}
); } ``` You are now importing your client, querying the `User` model for all users, and then displaying them in a list. Now your home page is dynamic and will display the users from your database. ### 3.1 Update your data (optional) [#31-update-your-data-optional] If you want to see what happens when data is updated, you could: * update your `User` table via a SQL browser of your choice * change your `seed.ts` file to add more users * change the call to `prisma.user.findMany` to re-order the users, filter the users, or similar. Reload the page to see the changes. ## 4. Add a new Posts list page [#4-add-a-new-posts-list-page] You have your home page working, but you should add a new page that displays all of your posts. First create a new `posts` directory in the `app` directory and create a new `page.tsx` file inside of it. ```bash mkdir -p app/posts && touch app/posts/page.tsx ``` Second, add the following code to the `app/posts/page.tsx` file: ```tsx title="app/posts/page.tsx" import prisma from "@/lib/prisma"; export default async function Posts() { return (

Posts

); } ``` Now `localhost:3000/posts` will load, but the content is hardcoded again. Update it to be dynamic, similarly to the home page: ```tsx title="app/posts/page.tsx" import prisma from "@/lib/prisma"; export default async function Posts() { const posts = await prisma.post.findMany({ include: { author: true, }, }); return (

Posts

); } ``` This works similarly to the home page, but instead of displaying users, it displays posts. You can also see that you've used `include` in your Prisma Client query to fetch the author of each post so you can display the author's name. This "list view" is one of the most common patterns in web applications. You're going to add two more pages to your application which you'll also commonly need: a "detail view" and a "create view". ## 5. Add a new Posts detail page [#5-add-a-new-posts-detail-page] To complement the Posts list page, you'll add a Posts detail page. In the `posts` directory, create a new `[id]` directory and a new `page.tsx` file inside of that. ```bash mkdir -p "app/posts/[id]" && touch "app/posts/[id]/page.tsx" ``` This page will display a single post's title, content, and author. Just like your other pages, add the following code to the `app/posts/[id]/page.tsx` file: ```tsx title="app/posts/[id]/page.tsx" import prisma from "@/lib/prisma"; export default async function Post({ params }: { params: Promise<{ id: string }> }) { return (

My first post

by Anonymous

No content available.
); } ``` As before, this page is static with hardcoded content. Update it to be dynamic based on the `params` passed to the page: ```tsx title="app/posts/[id]/page.tsx" import prisma from "@/lib/prisma"; import { notFound } from "next/navigation"; export default async function Post({ params }: { params: Promise<{ id: string }> }) { const { id } = await params; const post = await prisma.post.findUnique({ where: { id: parseInt(id) }, include: { author: true, }, }); if (!post) { notFound(); } return (

{post.title}

by {post.author.name}

{post.content || "No content available."}
); } ``` There's a lot of changes here, so here is what each part does: * You're using Prisma Client to fetch the post by its `id`, which you get from the `params` object. * In case the post doesn't exist (maybe it was deleted or maybe you typed a wrong ID), you call `notFound()` to display a 404 page. * You then display the post's title, content, and author. If the post doesn't have content, you display a placeholder message. It's not the prettiest page, but it's a good start. Try it out by navigating to `localhost:3000/posts/1` and `localhost:3000/posts/2`. You can also test the 404 page by navigating to `localhost:3000/posts/999`. ## 6. Add a new Posts create page [#6-add-a-new-posts-create-page] To round out your application, you'll add a "create" page for posts. This will let you write your own posts and save them to the database. As with the other pages, you'll start with a static page and then update it to be dynamic. ```bash mkdir -p app/posts/new && touch app/posts/new/page.tsx ``` Now, add the following code to the `app/posts/new/page.tsx` file: ```tsx title="app/posts/new/page.tsx" import Form from "next/form"; export default function NewPost() { async function createPost(formData: FormData) { "use server"; const title = formData.get("title") as string; const content = formData.get("content") as string; } return (

Create New Post