diff --git a/content/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/300-next-steps.mdx b/content/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/300-next-steps.mdx index 9e79b9532b..5a548901d5 100644 --- a/content/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/300-next-steps.mdx +++ b/content/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/300-next-steps.mdx @@ -92,7 +92,7 @@ The [`prisma-examples`](https://github.com/prisma/prisma-examples/) repository c | Demo | Stack | Description | | :------------------------------------------------------------------------------------------------------------------ | :----------- | --------------------------------------------------------------------------------------------------- | -| [`nextjs-api-routes`](https://pris.ly/e/ts/rest-nextjs-api-routes) | Fullstack | Simple [Next.js](https://nextjs.org/) app (React) with a REST API | +| [`nextjs`](https://pris.ly/e/orm/nextjs) | Fullstack | Simple [Next.js](https://nextjs.org/) app | | [`nextjs-graphql`](https://pris.ly/e/ts/graphql-nextjs) | Fullstack | Simple [Next.js](https://nextjs.org/) app (React) with a GraphQL API | | [`graphql-nexus`](https://pris.ly/e/ts/graphql-nexus) | Backend only | GraphQL server based on [`@apollo/server`](https://www.apollographql.com/docs/apollo-server) | | [`express`](https://pris.ly/e/ts/rest-express) | Backend only | Simple REST API with Express.JS | diff --git a/content/100-getting-started/02-setup-prisma/100-start-from-scratch/120-mongodb/300-next-steps.mdx b/content/100-getting-started/02-setup-prisma/100-start-from-scratch/120-mongodb/300-next-steps.mdx index fcbdf46f6c..568e9d946e 100644 --- a/content/100-getting-started/02-setup-prisma/100-start-from-scratch/120-mongodb/300-next-steps.mdx +++ b/content/100-getting-started/02-setup-prisma/100-start-from-scratch/120-mongodb/300-next-steps.mdx @@ -86,7 +86,7 @@ The [`prisma-examples`](https://github.com/prisma/prisma-examples/) repository c | Demo | Stack | Description | | :------------------------------------------------------------------------------------------------------------------ | :----------- | --------------------------------------------------------------------------------------------------- | -| [`nextjs-api-routes`](https://pris.ly/e/ts/rest-nextjs-api-routes) | Fullstack | Simple [Next.js](https://nextjs.org/) app (React) with a REST API | +| [`nextjs`](https://pris.ly/e/orm/nextjs) | Fullstack | Simple [Next.js](https://nextjs.org/) app | | [`nextjs-graphql`](https://pris.ly/e/ts/graphql-nextjs) | Fullstack | Simple [Next.js](https://nextjs.org/) app (React) with a GraphQL API | | [`graphql-nexus`](https://pris.ly/e/ts/graphql-nexus) | Backend only | GraphQL server based on [`@apollo/server`](https://www.apollographql.com/docs/apollo-server) | | [`express`](https://pris.ly/e/ts/rest-express) | Backend only | Simple REST API with Express.JS | diff --git a/content/100-getting-started/02-setup-prisma/200-add-to-existing-project/110-relational-databases/300-next-steps.mdx b/content/100-getting-started/02-setup-prisma/200-add-to-existing-project/110-relational-databases/300-next-steps.mdx index 5bdabdd144..1e8b8074c6 100644 --- a/content/100-getting-started/02-setup-prisma/200-add-to-existing-project/110-relational-databases/300-next-steps.mdx +++ b/content/100-getting-started/02-setup-prisma/200-add-to-existing-project/110-relational-databases/300-next-steps.mdx @@ -104,7 +104,7 @@ The [`prisma-examples`](https://github.com/prisma/prisma-examples/) repository c | Demo | Stack | Description | | :------------------------------------------------------------------------------------------------------------------ | :----------- | --------------------------------------------------------------------------------------------------- | -| [`nextjs-api-routes`](https://pris.ly/e/ts/rest-nextjs-api-routes) | Fullstack | Simple [Next.js](https://nextjs.org/) app (React) with a REST API | +| [`nextjs`](https://pris.ly/e/orm/nextjs) | Fullstack | Simple [Next.js](https://nextjs.org/) app | | [`nextjs-graphql`](https://pris.ly/e/ts/graphql-nextjs) | Fullstack | Simple [Next.js](https://nextjs.org/) app (React) with a GraphQL API | | [`graphql-nexus`](https://pris.ly/e/ts/graphql-nexus) | Backend only | GraphQL server based on [`@apollo/server`](https://www.apollographql.com/docs/apollo-server) | | [`express`](https://pris.ly/e/ts/rest-express) | Backend only | Simple REST API with Express.JS | diff --git a/content/100-getting-started/02-setup-prisma/200-add-to-existing-project/120-mongodb/300-next-steps.mdx b/content/100-getting-started/02-setup-prisma/200-add-to-existing-project/120-mongodb/300-next-steps.mdx index d9e1ba8ffa..eb1fab7f59 100644 --- a/content/100-getting-started/02-setup-prisma/200-add-to-existing-project/120-mongodb/300-next-steps.mdx +++ b/content/100-getting-started/02-setup-prisma/200-add-to-existing-project/120-mongodb/300-next-steps.mdx @@ -86,7 +86,7 @@ The [`prisma-examples`](https://github.com/prisma/prisma-examples/) repository c | Demo | Stack | Description | | :------------------------------------------------------------------------------------------------------------------ | :----------- | --------------------------------------------------------------------------------------------------- | -| [`nextjs-api-routes`](https://pris.ly/e/ts/rest-nextjs-api-routes) | Fullstack | Simple [Next.js](https://nextjs.org/) app (React) with a REST API | +| [`nextjs`](https://pris.ly/e/orm/nextjs) | Fullstack | Simple [Next.js](https://nextjs.org/) app | | [`nextjs-graphql`](https://pris.ly/e/ts/graphql-nextjs) | Fullstack | Simple [Next.js](https://nextjs.org/) app (React) with a GraphQL API | | [`graphql-nexus`](https://pris.ly/e/ts/graphql-nexus) | Backend only | GraphQL server based on [`@apollo/server`](https://www.apollographql.com/docs/apollo-server) | | [`express`](https://pris.ly/e/ts/rest-express) | Backend only | Simple REST API with Express.JS | diff --git a/content/200-orm/050-overview/300-prisma-in-your-stack/01-rest.mdx b/content/200-orm/050-overview/300-prisma-in-your-stack/01-rest.mdx index a210fb2972..5b7c5e3442 100644 --- a/content/200-orm/050-overview/300-prisma-in-your-stack/01-rest.mdx +++ b/content/200-orm/050-overview/300-prisma-in-your-stack/01-rest.mdx @@ -150,4 +150,4 @@ You can find several ready-to-run examples that show how to implement a REST API | [`fastify`](https://pris.ly/e/ts/rest-fastify) | Backend only | REST API using Fastify and Prisma Client. | | [`hapi`](https://pris.ly/e/ts/rest-hapi) | Backend only | REST API using hapi and Prisma Client | | [`nestjs`](https://pris.ly/e/ts/rest-nestjs) | Backend only | Nest.js app (Express) with a REST API | -| [`nextjs-api-routes`](https://pris.ly/e/ts/rest-nextjs-api-routes) | Fullstack | Next.js app (React) with a REST API | \ No newline at end of file +| [`nextjs`](https://pris.ly/e/orm/nextjs) | Fullstack | Next.js app (React) with a REST API | diff --git a/content/200-orm/050-overview/300-prisma-in-your-stack/03-fullstack.mdx b/content/200-orm/050-overview/300-prisma-in-your-stack/03-fullstack.mdx index db5a52efad..11d14cb2c4 100644 --- a/content/200-orm/050-overview/300-prisma-in-your-stack/03-fullstack.mdx +++ b/content/200-orm/050-overview/300-prisma-in-your-stack/03-fullstack.mdx @@ -108,9 +108,8 @@ You can find several ready-to-run examples that show how to fullstack apps with | **Example** | **Description** | | :----------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------- | -| [Next.js (API Routes)](https://pris.ly/e/ts/rest-nextjs-api-routes) | Fullstack Next.js app using `getServerSideProps` & API Routes | +| [Next.js](https://pris.ly/e/orm/nextjs) | Fullstack Next.js 15 app | | [Next.js (GraphQL)](https://pris.ly/e/ts/graphql-nextjs) | Fullstack Next.js app using GraphQL Yoga, Pothos, & Apollo Client | -| [Next.js (tRPC)](https://pris.ly/e/ts/trpc-nextjs) | Fullstack Next.js app using tRPC | | [Remix](https://pris.ly/e/ts/remix) | Fullstack Remix app using actions and loaders | | [SvelteKit](https://pris.ly/e/ts/sveltekit) | Fullstack Sveltekit app using actions and loaders | | [Nuxt](https://pris.ly/e/ts/rest-nuxtjs) | Fullstack Nuxt app using API routes | diff --git a/content/200-orm/800-more/500-development-environment/050-environment-variables/200-using-multiple-env-files.mdx b/content/200-orm/800-more/500-development-environment/050-environment-variables/200-using-multiple-env-files.mdx index af63ce4b7a..2b30be807d 100644 --- a/content/200-orm/800-more/500-development-environment/050-environment-variables/200-using-multiple-env-files.mdx +++ b/content/200-orm/800-more/500-development-environment/050-environment-variables/200-using-multiple-env-files.mdx @@ -24,6 +24,14 @@ Then using a package like [`dotenv-cli`](https://www.npmjs.com/package/dotenv-cl +## Understanding Prisma's Default .env Behavior +Prisma automatically loads environment variables from a .env file located at the root of your project by default. When using tools like dotenv-cli to specify a different .env file (e.g., .env.test), Prisma behaves as follows: + +- Primary Variables: It uses variables from the specified file (dotenv -e .env.test) only if they are not already set in the environment. +- Fallback Variables: For variables not included in the specified file, Prisma will load them from .env. + +This means that .env acts as a fallback. As a result, if .env contains values not meant for the current environment, they may still be loaded unintentionally. + ## Setup multiple `.env` files For the purpose of this guide, it is assumed you have a dedicated development database that you use whilst developing your application. diff --git a/content/300-accelerate/250-connection-pooling.mdx b/content/300-accelerate/250-connection-pooling.mdx index 54794400ff..6855a01fb1 100644 --- a/content/300-accelerate/250-connection-pooling.mdx +++ b/content/300-accelerate/250-connection-pooling.mdx @@ -34,6 +34,15 @@ When not using Prisma Accelerate, you can configure the connection pool of Prism Autoscaling allows Accelerate to dynamically allocate resources based on your application's traffic. As consistent usage approaches the current connection limit, Accelerate will begin allocating new resources to handle the increased load. If traffic continues to rise, Accelerate will scale up further. Conversely, when traffic decreases, Accelerate will scale down accordingly. +*To provide more context, Accelerate horizontally scales your environment by distributing the total available connections across multiple Query Engine instances. For example:* + +- If your environment connection limit is set to 1000, Accelerate will scale up to multiple Query Engine instances (e.g., 100 instances). +- Each Query Engine instance is then assigned a share of the total connections— in this case, 10 connections per instance. +- This is why an individual Query Engine instance reports a connection limit of 10, even though the total connection limit for the environment is 1000. + +*This scaling mechanism ensures that your application can handle higher traffic loads by increasing the number of Query Engine instances while keeping the connection pool management efficient and distributed.* + + Autoscaling is enabled when the Accelerate connection limit is set above the default value. This feature is not available on the Starter plan. The maximum value of your Accelerate connection limit is based on your [Prisma Data Platform plan](https://www.prisma.io/pricing). @@ -120,4 +129,4 @@ See the [troubleshooting guide](/accelerate/troubleshoot#p6009-responsesizelimit :::warning While you can increase the query response size, it’s recommended to limit data retrieval to what you actually need. This improves database performance, reduces stress on your database, and makes your frontend applications more responsive. Queries exceeding 5 MB in size often indicate a need for optimization. Learn more in the [troubleshooting guide](/accelerate/troubleshoot#p6009-responsesizelimitexceeded). -::: \ No newline at end of file +::: diff --git a/content/300-accelerate/600-faq.mdx b/content/300-accelerate/600-faq.mdx index dad5c25ad4..3c4975e4f0 100644 --- a/content/300-accelerate/600-faq.mdx +++ b/content/300-accelerate/600-faq.mdx @@ -200,3 +200,21 @@ Using on-demand cache invalidation in these scenarios helps keep only the necess ## How does Accelerate count queries for billing? Accelerate counts queries at the Prisma Client invocation level. A single Prisma query may translate into multiple SQL statements under the hood, but it will only count as one query for billing purposes. This ensures straightforward, predictable billing that reflects the Prisma Client usage rather than the complexity of the underlying SQL operations. + +## How do I switch from GitHub login to email and password login? + +If you previously signed up using GitHub and want to switch to email and password login, follow these steps: + +### 1. Verify Your GitHub Email Address +- Check the primary email address associated with your GitHub account (e.g., from your GitHub profile or notification settings). + +### 2. Create a New Email/Password Account +- Go to the email/password sign-up page. +- Use the **same email address** linked to your GitHub account to create the new account. +- Our system will automatically connect your new email/password account to your existing data. + +### 3. Test Your Login +- Log out and try logging in with your email and the password you just created. + +> **Note**: If you encounter any issues, please contact our support team for help linking your accounts. + diff --git a/content/800-guides/300-data-migration-with-expand-and-contract.mdx b/content/800-guides/010-data-migration-with-expand-and-contract.mdx similarity index 96% rename from content/800-guides/300-data-migration-with-expand-and-contract.mdx rename to content/800-guides/010-data-migration-with-expand-and-contract.mdx index 391a1a0fee..d23961f158 100644 --- a/content/800-guides/300-data-migration-with-expand-and-contract.mdx +++ b/content/800-guides/010-data-migration-with-expand-and-contract.mdx @@ -1,8 +1,8 @@ --- -title: 'How to migrate data using the expand and contract pattern' -metaTitle: 'How to migrate data using the expand and contract pattern' +title: 'Migrate data using the expand and contract pattern' +metaTitle: 'How to migrate data with Prisma ORM using the expand and contract pattern' description: 'Learn how to perform data migrations using the expand and contract pattern with Prisma ORM' -sidebar_label: 'Data migration with expand and contract' +sidebar_label: 'Migrate data with expand and contract' image: '/img/guides/data-migration-cover.png' tags: - migration diff --git a/content/800-guides/400-implementing-schema-changes.mdx b/content/800-guides/020-implementing-schema-changes.mdx similarity index 99% rename from content/800-guides/400-implementing-schema-changes.mdx rename to content/800-guides/020-implementing-schema-changes.mdx index 71376c590e..63025cca40 100644 --- a/content/800-guides/400-implementing-schema-changes.mdx +++ b/content/800-guides/020-implementing-schema-changes.mdx @@ -2,7 +2,7 @@ title: 'How to manage schema changes in a team' metaTitle: 'How to manage schema changes in a team with Prisma Migrate' description: 'Learn how to use Prisma Migrate effectively when collaborating on a project as a team' -sidebar_label: 'Team schema changes' +sidebar_label: 'Manage schema changes' image: '/img/guides/schema-migration-cover.png' --- diff --git a/content/800-guides/500-migrate-from-typeorm.mdx b/content/800-guides/030-migrate-from-typeorm.mdx similarity index 100% rename from content/800-guides/500-migrate-from-typeorm.mdx rename to content/800-guides/030-migrate-from-typeorm.mdx diff --git a/content/800-guides/600-migrate-from-sequelize.mdx b/content/800-guides/040-migrate-from-sequelize.mdx similarity index 100% rename from content/800-guides/600-migrate-from-sequelize.mdx rename to content/800-guides/040-migrate-from-sequelize.mdx diff --git a/content/800-guides/700-migrate-from-mongoose.mdx b/content/800-guides/050-migrate-from-mongoose.mdx similarity index 100% rename from content/800-guides/700-migrate-from-mongoose.mdx rename to content/800-guides/050-migrate-from-mongoose.mdx diff --git a/content/800-guides/800-migrate-from-drizzle.mdx b/content/800-guides/060-migrate-from-drizzle.mdx similarity index 100% rename from content/800-guides/800-migrate-from-drizzle.mdx rename to content/800-guides/060-migrate-from-drizzle.mdx diff --git a/content/800-guides/900-using-prisma-orm-with-cloudflare-d1.mdx b/content/800-guides/070-using-prisma-orm-with-cloudflare-d1.mdx similarity index 100% rename from content/800-guides/900-using-prisma-orm-with-cloudflare-d1.mdx rename to content/800-guides/070-using-prisma-orm-with-cloudflare-d1.mdx diff --git a/content/800-guides/1000-using-prisma-orm-with-turborepo.mdx b/content/800-guides/080-using-prisma-orm-with-turborepo.mdx similarity index 98% rename from content/800-guides/1000-using-prisma-orm-with-turborepo.mdx rename to content/800-guides/080-using-prisma-orm-with-turborepo.mdx index 5c09052a4c..6ee604698d 100644 --- a/content/800-guides/1000-using-prisma-orm-with-turborepo.mdx +++ b/content/800-guides/080-using-prisma-orm-with-turborepo.mdx @@ -1,12 +1,13 @@ --- -title: 'Using Prisma with Turborepo' -metaTitle: 'Using Prisma with Turborepo' +title: 'How to use Prisma ORM with Turborepo' +metaTitle: 'How to use Prisma ORM with Turborepo' description: 'Learn step-by-step how to integrate Prisma ORM with Turborepo to build modular, scalable monorepo architectures efficiently.' -sidebar_label: 'Prisma with Turborepo' +sidebar_label: 'Use Prisma ORM with Turborepo' image: '/img/guides/prisma-turborepo-setup.png' tags: - Turborepo - Monorepo + - Vercel --- Prisma is a powerful ORM for managing databases, and [Turborepo](https://turbo.build/) simplifies monorepo workflows. By combining these tools, you can create a scalable, modular architecture for your projects. diff --git a/content/800-guides/090-prisma-orm-with-nextjs.mdx b/content/800-guides/090-prisma-orm-with-nextjs.mdx new file mode 100644 index 0000000000..1f10fb3654 --- /dev/null +++ b/content/800-guides/090-prisma-orm-with-nextjs.mdx @@ -0,0 +1,733 @@ +--- +title: 'How to use Prisma ORM with Next.js' +metaTitle: 'How to use Prisma ORM with Next.js 15 and Vercel' +description: 'Learn how to use Prisma ORM in a Next.js app and deploy it to Vercel' +sidebar_label: 'Use Prisma ORM with Next.js' +image: '/img/guides/prisma-nextjs-cover.png' +tags: + - Next.js + - Vercel +--- + +## Introduction + +This guide shows you how to use Prisma ORM with Next.js 15, a fullstack React framework. You'll learn how to 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 + +Before starting this guide, make sure you have: + +- Node.js 18+ installed +- A [Prisma Postgres](https://www.prisma.io/postgres) database (or any PostgreSQL database) +- A Vercel account (if you want to deploy your application) + +## 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 we will be using for this guide. + +```terminal +npx create-next-app@latest my-app --yes +``` + +Then, navigate to the project directory: + +```terminal +cd my-app +``` + +## 2. Set up Prisma ORM + +### 2.1 Install Prisma ORM and create your first models + +First, we need to install a few dependencies. At the root of your project in your terminal, run: + +```terminal +npm install prisma --save-dev +npm install tsx --save-dev +npm install @prisma/extension-accelerate +``` + +:::info + +If you're not using a Prisma Postgres database, you won't need the `@prisma/extension-accelerate` package. + +::: + +Then, run `prisma init` to initialize Prisma ORM in your project. + +```terminal +npx prisma init +``` + +This will create a new `prisma` directory in your project, with a `schema.prisma` file inside of it. The `schema.prisma` file is where you will define your database models. + +The `prisma init` command also creates a `.env` file in your project root. This file is used to store your database connection string. + +Next, let's add two models to your `schema.prisma` file. A `User` model and a `Post` model. + +```prisma file=prisma/schema.prisma +generator client { + provider = "prisma-client-js" +} + +datasource db { + provider = "postgresql" + url = env("DATABASE_URL") +} + +//add-start +model User { + id Int @id @default(autoincrement()) + email String @unique + name String? + posts Post[] +} + +model Post { + id Int @id @default(autoincrement()) + title String + content String? + published Boolean @default(false) + authorId Int + author User @relation(fields: [authorId], references: [id]) +} +//add-end +``` + +This represents a simple blog with users and posts. Each `Post` can have a `User` as an author and each `User` can have many `Post`s. + +Now that we have a Prisma Schema and a model, let's connect to our Prisma Postgres database. + +### 2.2 Save your database connection string + +Now that you have your Prisma schema, you will need a database to apply your schema to. + +:::note[I don't have a database yet] + +If you don't have a database yet, you can create a new one through the [Prisma Console](https://console.prisma.io/). Step-by-step instructions are available in our [getting started guide](/getting-started/quickstart-prismaPostgres#1-set-up-a-prisma-postgres-database-in-the-platform-console). + +::: + +When you have created your Prisma Postgres project, you'll get a `DATABASE_URL` and `PULSE_API_KEY`. Store these in your `.env` file. + +```env file=.env +DATABASE_URL=[Your Database URL Here] +PULSE_API_KEY=[Your Pulse API Key Here] +``` + +:::info + +If you're not using Prisma Postgres you won't need the `PULSE_API_KEY` here. + +::: + +### 2.3 Update your database schema + +:::warning + +If you're connecting to a database with existing data, use the `prisma db pull` command and then skip to [Set up Prisma Client](#25-set-up-prisma-client). + +::: + +Now that you've saved your database connection string, we can apply your schema to your database using the `prisma migrate dev` command. + +```terminal +npx prisma migrate dev --name init +``` + +This creates an initial migration creating the `User` and `Post` tables and applies that migration to your database. + +Now, let's add some initial data to our database. + +### 2.4 Seed your database + +Prisma ORM has built-in support for seeding your database with initial data. To do this, you can create a new file called `seed.ts` in the `prisma` directory. + +```ts file=prisma/seed.ts +import { PrismaClient, Prisma } from '@prisma/client' + +const prisma = new PrismaClient() + +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, add the `prisma.seed` configuration to your `package.json` file. + +```json file=package.json +{ + "name": "my-app", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev --turbopack", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + //add-start + "prisma": { + "seed": "tsx prisma/seed.ts" + }, + //add-end + "dependencies": { + "@prisma/client": "^6.2.1", + "@prisma/extension-accelerate": "^1.2.1", + "next": "15.1.4", + "react": "^19.0.0", + "react-dom": "^19.0.0" + }, + "devDependencies": { + "@eslint/eslintrc": "^3", + "@types/node": "^20", + "@types/react": "^19", + "@types/react-dom": "^19", + "eslint": "^9", + "eslint-config-next": "15.1.4", + "postcss": "^8", + "prisma": "^6.2.1", + "tailwindcss": "^3.4.1", + "tsx": "^4.19.2", + "typescript": "^5" + } +} +``` + +Finally, run `prisma db seed` to seed your database with the initial data we defined in the `seed.ts` file. + +```terminal +npx prisma db seed +``` + +We now have a database with some initial data! You can check out the data in your database by running `prisma studio`. + +```terminal +npx prisma studio +``` + +### 2.5 Set up Prisma Client + +Now that we have a database with some initial data, we can set up Prisma Client and connect it to our database. + +At the root of your project, create a new `lib` directory and add a `prisma.ts` file to it. + +```terminal +mkdir -p lib && touch lib/prisma.ts +``` + +Now, add the following code to your `lib/prisma.ts` file: + +```ts file=lib/prisma.ts +import { PrismaClient } from '@prisma/client' +import { withAccelerate } from '@prisma/extension-accelerate' + +const prisma = new PrismaClient().$extends(withAccelerate()) + +const globalForPrisma = global as unknown as { prisma: typeof prisma } + +if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma + +export default prisma +``` + +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. + +:::note + +If you're not using Prisma Postgres, replace the line +```ts +const prisma = new PrismaClient().$extends(withAccelerate()) +``` +with +```ts +const prisma = new PrismaClient() +``` +and remove the `@prisma/extension-accelerate` import. + +::: + +We'll use this client in the next section to run your first queries. + +## 3. Query your database with Prisma ORM + +Now that we have an initialized Prisma Client, a connection to our database, and some initial data, we can start querying our data with Prisma ORM. + +In our example, we'll be making the "home" page of our application display all of our users. + +Open the `app/page.tsx` file and replace the existing code with the following: + +```tsx file=app/page.tsx +export default async function Home() { + return ( +
+

+ Superblog +

+
    +
  1. Alice
    2. +
  2. Bob
    3. +
+
+ ); +} +``` + +This gives us a basic page with a title and a list of users. However, that list is static and doesn't change. Let's update the page to fetch the users from our database and make it dynamic. + +```tsx file=app/page.tsx +//add-start +import prisma from '@/lib/prisma' +//add-end + +export default async function Home() { + //add-start + const users = await prisma.user.findMany(); + //add-end + return ( +
+

+ Superblog +

+
    + //add-start + {users.map((user) => ( +
  1. + {user.name} +
    2. + ))} + //add-end +
+
+ ); +} + +``` + +We are now importing our 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) + +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. + +Just reload the page and you'll see the changes. + +## 4. Add a new Posts list page + +We have our home page working, but we should add a new page that displays all of our posts. + +First create a new `posts` directory in the `app` directory and create a new `page.tsx` file inside of it. + +```terminal +mkdir -p app/posts && touch app/posts/page.tsx +``` + +Second, add the following code to the `app/posts/page.tsx` file: + +```tsx file=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 static. Let's update it to be dynamic, similarly to the home page: + +```tsx file=app/posts/page.tsx +import prisma from "@/lib/prisma"; + +export default async function Posts() { + //add-start + const posts = await prisma.post.findMany({ + include: { + author: true, + }, + }); + //add-end + + return ( +
+

+ Posts +

+ +
+ ); +} +``` + +This works similarly to the home page, but instead of displaying users, it displays posts. You can also see that we've used `include` in our Prisma Client query to fetch the author of each post so we can display the author's name. + +This "list view" is one of the most common patterns in web applications. We're going to add two more pages to our application which you'll also commonly need: a "detail view" and a "create view". + +## 5. Add a new Posts detail page + +To complement the Posts list page, we'll add a Posts detail page. + +In the `posts` directory, create a new `[id]` directory and a new `page.tsx` file inside of that. + +```terminal +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 our other pages, add the following code to the `app/posts/new/page.tsx` file: + +```tsx file=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. Let's update it to be dynamic based on the `params` passed to the page: + +```tsx file=app/posts/[id]/page.tsx +import prisma from "@/lib/prisma"; +//add-start +import { notFound } from "next/navigation"; +//add-end + +export default async function Post({ params }: { params: Promise<{ id: string }> }) { + //add-start + const { id } = await params; + const post = await prisma.post.findUnique({ + where: { id: parseInt(id) }, + include: { + author: true, + }, + }); + + if (!post) { + notFound(); + } + //add-end + + return ( +
+
+ //delete-start +

My first post

+

by Anonymous

+
+ No content available. +
+ //delete-end + //add-start +

{post.title}

+

by {post.author.name}

+
+ {post.content || "No content available."} +
+ //add-end +
+
+ ); +} +``` + +There's a lot of changes here, so let's break it down: + +- We're using Prisma Client to fetch the post by its `id`, which we get from the `params` object. +- In case the post doesn't exist (maybe it was deleted or maybe you typed a wrong ID), we call `notFound()` to display a 404 page. +- We then display the post's title, content, and author. If the post doesn't have content, we 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 + +To round out our application, we'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, we'll start with a static page and then update it to be dynamic. + +```terminal +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 file=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

+
+
+ + +
+
+ +