如何在 Next.js 中使用 Prisma ORM

20 分钟

引言

本指南将向您展示如何在 Next.js 15（一个全栈 React 框架）中使用 Prisma。您将学习如何创建 Prisma Postgres 实例、在 Next.js 中设置 Prisma ORM、处理迁移以及将应用程序部署到 Vercel。

您可以在 GitHub 上找到一个可供部署的示例。

先决条件

Node.js 18+
Vercel 帐户（如果您想部署应用程序）

1. 设置你的项目

从您想创建项目的目录中，运行 create-next-app 来创建一个新的 Next.js 应用程序，您将在本指南中使用它。

npx create-next-app@latest nextjs-prisma

系统会提示您回答一些关于项目的问题。选择所有默认选项。

信息

作为参考，它们是

TypeScript
ESLint
Tailwind CSS
无 src 目录
App Router
Turbopack
无自定义导入别名

然后，导航到项目目录

cd nextjs-prisma

2. 安装和配置 Prisma

2.1. 安装依赖

要开始使用 Prisma，您需要安装一些依赖项

Prisma Postgres (推荐)
其他数据库

npm install prisma tsx --save-dev
npm install @prisma/extension-accelerate @prisma/client

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

安装后，在您的项目中初始化 Prisma

npx prisma init --db --output ../app/generated/prisma

信息

在设置 Prisma Postgres 数据库时，您需要回答几个问题。选择离您位置最近的区域，并为您的数据库起一个容易记住的名字，例如“我的 __________ 项目”

这将创建

一个包含 schema.prisma 文件的 prisma 目录。
一个 Prisma Postgres 数据库。
项目根目录下的一个包含 DATABASE_URL 的 .env 文件。
一个用于生成 Prisma Client 的 output 目录，路径为 app/generated/prisma。

2.2. 定义你的 Prisma Schema

在 prisma/schema.prisma 文件中，添加以下模型

prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
  output   = "../app/generated/prisma"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

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])
}

这创建了两个模型：User 和 Post，它们之间存在一对多的关系。

2.3. 配置 Prisma Client 生成器

现在，运行以下命令来创建数据库表并生成 Prisma Client

npx prisma migrate dev --name init

2.4. 填充数据库

添加一些种子数据来填充数据库，包含示例用户和帖子。

在 prisma/ 目录中创建一个名为 seed.ts 的新文件

prisma/seed.ts

import { PrismaClient, Prisma } from "../app/generated/prisma";

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();

现在，通过更新 package.json 来告诉 Prisma 如何运行此脚本

package.json

{
  "name": "nextjs-prisma",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "prisma": {
    "seed": "tsx prisma/seed.ts"
  },
  "dependencies": {
    "@prisma/client": "^6.7.0",
    "@prisma/extension-accelerate": "^1.3.0",
    "next": "15.3.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.3.1",
    "prisma": "^6.7.0",
    "tailwindcss": "^4",
    "tsx": "^4.19.4",
    "typescript": "^5"
  }
}

警告

在启动开发服务器之前，请注意，如果您使用的是 Next.js v15.2.0 或 v15.2.1，请勿使用 Turbopack，因为存在一个已知问题。通过更新 package.json 来从开发脚本中移除 Turbopack

package.json

"script":{
    "dev": "next dev --turbopack",
    "dev": "next dev",
}

在之前或之后的任何版本上都不需要此更改。

最后，运行 prisma db seed 来使用我们在 seed.ts 文件中定义的初始数据填充您的数据库。

运行种子脚本

npx prisma db seed

并打开 Prisma Studio 检查你的数据

npx prisma studio

2.5 设置 Prisma Client

现在您已经有了一个包含一些初始数据的数据库，您可以设置 Prisma Client 并将其连接到您的数据库。

在项目根目录下，创建一个新的 lib 目录并在其中添加一个 prisma.ts 文件。

mkdir -p lib && touch lib/prisma.ts

现在，将以下代码添加到您的 lib/prisma.ts 文件中

Prisma Postgres (推荐)
其他数据库

lib/prisma.ts

import { PrismaClient } from '../app/generated/prisma'
import { withAccelerate } from '@prisma/extension-accelerate'

const globalForPrisma = global as unknown as { 
    prisma: PrismaClient
}

const prisma = globalForPrisma.prisma || new PrismaClient().$extends(withAccelerate())

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

export default prisma

lib/prisma.ts

import { PrismaClient } from '../src/app/generated/prisma'

const globalForPrisma = global as unknown as { 
    prisma: PrismaClient
}

const prisma = globalForPrisma.prisma || new PrismaClient()

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

export default prisma

此文件创建了一个 Prisma 客户端并将其附加到全局对象上，以便在您的应用程序中只创建一个客户端实例。这有助于解决在开发模式下将 Prisma ORM 与 Next.js 一起使用时可能出现的热重载问题。

您将在下一节中使用此客户端来运行您的第一个查询。

3. 使用 Prisma ORM 查询你的数据库

现在您已经初始化了 Prisma Client，连接到了数据库，并且有了一些初始数据，您可以开始使用 Prisma ORM 查询数据了。

在此示例中，您将使应用程序的“主页”显示所有用户。

打开 app/page.tsx 文件并将其现有代码替换为以下内容

app/page.tsx

export default async function Home() {
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center -mt-16">
      <h1 className="text-4xl font-bold mb-8 font-[family-name:var(--font-geist-sans)] text-[#333333]">
        Superblog
      </h1>
      <ol className="list-decimal list-inside font-[family-name:var(--font-geist-sans)]">
        <li className="mb-2">Alice</li>
        <li>Bob</li>
      </ol>
    </div>
  );
}

这为您提供了一个带有标题和用户列表的基本页面。然而，该列表是静态的，带有硬编码值。让我们更新页面以从您的数据库中获取用户并使其动态化。

app/page.tsx

import prisma from '@/lib/prisma'

export default async function Home() {
  const users = await prisma.user.findMany();
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center -mt-16">
      <h1 className="text-4xl font-bold mb-8 font-[family-name:var(--font-geist-sans)] text-[#333333]">
        Superblog
      </h1>
      <ol className="list-decimal list-inside font-[family-name:var(--font-geist-sans)]">
        {users.map((user) => (
          <li key={user.id} className="mb-2">
            {user.name}
          </li>
        ))}
      </ol>
    </div>
  );
}

您现在正在导入客户端，查询 User 模型以获取所有用户，然后将它们显示在列表中。

现在您的主页是动态的，并将显示来自您数据库的用户。

3.1 更新您的数据 (可选)

如果您想看看数据更新时会发生什么，您可以

通过您选择的 SQL 浏览器更新您的 User 表
更改您的 seed.ts 文件以添加更多用户
更改对 prisma.user.findMany 的调用，以重新排序用户、筛选用户或类似操作。

只需重新加载页面，您就会看到更改。

4. 添加一个新的帖子列表页

您的主页已正常运行，但您应该添加一个新页面来显示所有帖子。

首先在 app 目录下创建一个新的 posts 目录，并在其中创建一个新的 page.tsx 文件。

mkdir -p app/posts && touch app/posts/page.tsx

其次，将以下代码添加到 app/posts/page.tsx 文件中

app/posts/page.tsx

import prisma from "@/lib/prisma";

export default async function Posts() {
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center -mt-16">
      <h1 className="text-4xl font-bold mb-8 font-[family-name:var(--font-geist-sans)] text-[#333333]">
        Posts
      </h1>
      <ul className="font-[family-name:var(--font-geist-sans)] max-w-2xl space-y-4">
          <li>My first post</li>
      </ul>
    </div>
  );
}

现在 localhost:3000/posts 将加载，但内容再次是硬编码的。让我们更新它使其动态化，类似于主页

app/posts/page.tsx

import prisma from "@/lib/prisma";

export default async function Posts() {
  const posts = await prisma.post.findMany({
    include: {
      author: true,
    },
  });

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center -mt-16">
      <h1 className="text-4xl font-bold mb-8 font-[family-name:var(--font-geist-sans)] text-[#333333]">
        Posts
      </h1>
      <ul className="font-[family-name:var(--font-geist-sans)] max-w-2xl space-y-4">
        {posts.map((post) => (
          <li key={post.id}>
            <span className="font-semibold">{post.title}</span>
            <span className="text-sm text-gray-600 ml-2">
              by {post.author.name}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

这与主页类似，但它显示的是帖子而不是用户。您还可以看到，您在 Prisma Client 查询中使用了 include 来获取每个帖子的作者，这样您就可以显示作者的姓名。

这种“列表视图”是 Web 应用程序中最常见的模式之一。您将向您的应用程序添加另外两个您也通常需要的页面：“详细视图”和“创建视图”。

5. 添加一个新的帖子详情页

为了完善帖子列表页，您将添加一个帖子详情页。

在 posts 目录中，创建一个新的 [id] 目录并在其中创建一个新的 page.tsx 文件。

mkdir -p app/posts/[id] && touch app/posts/[id]/page.tsx

此页面将显示单个帖子的标题、内容和作者。就像您的其他页面一样，将以下代码添加到 app/posts/new/page.tsx 文件中

app/posts/[id]/page.tsx

import prisma from "@/lib/prisma";

export default async function Post({ params }: { params: Promise<{ id: string }> }) {
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center -mt-16">
      <article className="max-w-2xl space-y-4 font-[family-name:var(--font-geist-sans)]">
        <h1 className="text-4xl font-bold mb-8 text-[#333333]">My first post</h1>
        <p className="text-gray-600 text-center">by Anonymous</p>
        <div className="prose prose-gray mt-8">
          No content available.
        </div>
      </article>
    </div>
  );
}

和以前一样，这个页面是静态的，内容是硬编码的。让我们根据传递给页面的 params 来更新它，使其动态化

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 (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center -mt-16">
      <article className="max-w-2xl space-y-4 font-[family-name:var(--font-geist-sans)]">
        <h1 className="text-4xl font-bold mb-8 text-[#333333]">{post.title}</h1>
        <p className="text-gray-600 text-center">by {post.author.name}</p>
        <div className="prose prose-gray mt-8">
          {post.content || "No content available."}
        </div>
      </article>
    </div>
  );
}

这里有很多变化，我们来分解一下

您正在使用 Prisma Client 根据其 id 获取帖子，该 id 来自 params 对象。
如果帖子不存在（可能已被删除，或者您输入了错误的 ID），您将调用 notFound() 以显示 404 页面。
然后显示帖子的标题、内容和作者。如果帖子没有内容，则显示占位符消息。

虽然页面不太美观，但这是一个好的开始。尝试导航到 localhost:3000/posts/1 和 localhost:3000/posts/2。您也可以通过导航到 localhost:3000/posts/999 来测试 404 页面。

6. 添加一个新的帖子创建页面

为了完善您的应用程序，您将为帖子添加一个“创建”页面。这将允许您撰写自己的帖子并将其保存到数据库中。

与其他页面一样，您将从一个静态页面开始，然后将其更新为动态页面。

mkdir -p app/posts/new && touch app/posts/new/page.tsx

现在，将以下代码添加到 app/posts/new/page.tsx 文件中

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 (
    <div className="max-w-2xl mx-auto p-4">
      <h1 className="text-2xl font-bold mb-6">Create New Post</h1>
      <Form action={createPost} className="space-y-6">
        <div>
          <label htmlFor="title" className="block text-lg mb-2">
            Title
          </label>
          <input
            type="text"
            id="title"
            name="title"
            placeholder="Enter your post title"
            className="w-full px-4 py-2 border rounded-lg"
          />
        </div>
        <div>
          <label htmlFor="content" className="block text-lg mb-2">
            Content
          </label>
          <textarea
            id="content"
            name="content"
            placeholder="Write your post content here..."
            rows={6}
            className="w-full px-4 py-2 border rounded-lg"
          />
        </div>
        <button
          type="submit"
          className="w-full bg-blue-500 text-white py-3 rounded-lg hover:bg-blue-600"
        >
          Create Post
        </button>
      </Form>
    </div>
  );
}

这个表单看起来不错，但它还没有任何功能。让我们更新 createPost 函数以将帖子保存到数据库中

app/posts/new/page.tsx

import Form from "next/form";
import prisma from "@/lib/prisma";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

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;

    await prisma.post.create({
      data: {
        title,
        content,
        authorId: 1,
      },
    });

    revalidatePath("/posts");
    redirect("/posts");
  }

  return (
    <div className="max-w-2xl mx-auto p-4">
      <h1 className="text-2xl font-bold mb-6">Create New Post</h1>
      <Form action={createPost} className="space-y-6">
        <div>
          <label htmlFor="title" className="block text-lg mb-2">
            Title
          </label>
          <input
            type="text"
            id="title"
            name="title"
            placeholder="Enter your post title"
            className="w-full px-4 py-2 border rounded-lg"
          />
        </div>
        <div>
          <label htmlFor="content" className="block text-lg mb-2">
            Content
          </label>
          <textarea
            id="content"
            name="content"
            placeholder="Write your post content here..."
            rows={6}
            className="w-full px-4 py-2 border rounded-lg"
          />
        </div>
        <button
          type="submit"
          className="w-full bg-blue-500 text-white py-3 rounded-lg hover:bg-blue-600"
        >
          Create Post
        </button>
      </Form>
    </div>
  );
}

这个页面现在有一个功能性的表单！当您提交表单时，它将在数据库中创建一个新帖子，并重定向您到帖子列表页面。

您还添加了一个 revalidatePath 调用，以重新验证帖子列表页面，使其能与新帖子一起更新。这样每个人都可以立即阅读新帖子。

尝试导航到 localhost:3000/posts/new 并提交表单。

7. 将您的应用程序部署到 Vercel (可选)

将您的应用程序部署到 Vercel 的最快方法是使用 Vercel CLI。

首先，安装 Vercel CLI

npm install -g vercel

然后，运行 vercel login 登录您的 Vercel 帐户。

vercel login

在部署之前，您还需要告诉 Vercel 确保生成 Prisma Client。您可以通过在 package.json 文件中添加 postinstall 脚本来完成此操作。

package.json

{
  "name": "nextjs-prisma",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "postinstall": "prisma generate --no-engine",
    "start": "next start",
    "lint": "next lint"
  },
  "prisma": {
    "seed": "tsx prisma/seed.ts"
  },
  "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"
  }
}

注意

如果您未使用 Prisma Postgres，则需要从命令中删除 --no-engine 标志。

此更改后，您可以通过运行 vercel 将应用程序部署到 Vercel。

vercel

部署完成后，您可以通过 Vercel 提供的 URL 访问您的应用程序。恭喜，您已成功部署了一个带有 Prisma ORM 的 Next.js 应用程序！

8. 下一步

现在您已经有了一个使用 Prisma ORM 的 Next.js 应用程序，以下是一些可以扩展和改进您应用程序的方法

添加身份验证以保护您的路由
添加编辑和删除帖子的功能
为帖子添加评论
使用 Prisma Studio 进行可视化数据库管理

了解更多信息

与 Prisma 保持联系

通过与以下方面建立联系，继续您的 Prisma 之旅我们的活跃社区。保持信息更新，参与其中，并与其他开发者协作

在 X 上关注我们获取公告、直播活动和实用技巧。
加入我们的 Discord 提问、与社区交流，并通过对话获得积极支持。
在 YouTube 上订阅获取教程、演示和直播。
在 GitHub 上参与通过给仓库加星、报告问题或为问题做出贡献。

我们真心重视您的参与，并期待您成为我们社区的一份子！

引言​

先决条件​

1. 设置你的项目​

2. 安装和配置 Prisma​

2.1. 安装依赖​

2.2. 定义你的 Prisma Schema​

2.3. 配置 Prisma Client 生成器​

2.4. 填充数据库​

2.5 设置 Prisma Client​

3. 使用 Prisma ORM 查询你的数据库​

3.1 更新您的数据 (可选)​

4. 添加一个新的帖子列表页​

5. 添加一个新的帖子详情页​

6. 添加一个新的帖子创建页面​

7. 将您的应用程序部署到 Vercel (可选)​

8. 下一步​

与 Prisma 保持联系

引言

先决条件

1. 设置你的项目

2. 安装和配置 Prisma

2.1. 安装依赖

2.2. 定义你的 Prisma Schema

2.3. 配置 Prisma Client 生成器

2.4. 填充数据库

2.5 设置 Prisma Client

3. 使用 Prisma ORM 查询你的数据库

3.1 更新您的数据 (可选)

4. 添加一个新的帖子列表页

5. 添加一个新的帖子详情页

6. 添加一个新的帖子创建页面

7. 将您的应用程序部署到 Vercel (可选)

8. 下一步