在 Next.js 中使用数据库最简单的方法

使用 Prisma 开发者友好的数据库工具构建高性能、类型安全的 Next.js 应用：全球最受欢迎的 TypeScript ORM 和首个无冷启动的无服务器数据库。

试用 Next.js 与 Prisma

为什么选择 Next.js 和 Prisma

专为高性能 Web 应用打造

Prisma Postgres 基于 unikernels 构建，可在裸金属服务器上运行，实现峰值性能和无限可扩展性。

无服务器，无冷启动

首个无服务器数据库，采用按量付费模式，无需基础设施管理，并零冷启动。

灵活的数据获取与渲染

使用客户端渲染、服务器端渲染和静态站点生成来显示您的数据。

内置全局缓存

为任何数据库查询添加缓存策略，其结果将缓存在离用户最近的地方，以实现峰值性能和用户体验。

端到端类型安全

将 Prisma 与 Next.js 结合使用可确保您的应用从数据库到 React 组件都具有一致的类型。

有益的社区

Next.js 和 Prisma 都有充满活力的社区，您可以在其中找到支持、有趣的活动和出色的开发者。

Prisma 和 Next.js 如何协同工作

Prisma 的数据库工具非常适合构建 Next.js 应用程序。它们充当服务器组件（静态和动态）、服务器动作、路由处理程序和独立服务的数据访问层。

静态数据

使用 Prisma 进行静态站点生成

Next.js 13+ 引入了数据获取方式的根本性转变。App Router 中默认的服务器组件允许您直接在组件中获取数据，无需额外的封装器或特殊函数。这意味着您可以直接在组件中使用 Prisma，并在可能的情况下自动获得静态生成。

以下是如何实现一个在构建时静态生成的博客页面。数据获取发生在服务器端，HTML 在构建期间生成一次。

// app/blog/[slug]/page.tsx

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const posts = await prisma.post.findMany()
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
 
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default async function Page({ params }: { params: { slug: string } }) {
  // Fetch the post based on slug
  const post = await prisma.post.findUnique({
    where: { slug: params.slug },
  })
  
  // Simple demo rendering
  return (
    <div>
      <h1>{post?.title || 'Post not found'}</h1>
      <p>{post?.content || 'No content available'}</p>
    </div>
  )
}

动态数据

服务器动作

API 路由

客户端组件

使用 Prisma 进行静态站点生成

以下是如何实现一个在构建时静态生成的博客页面。数据获取发生在服务器端，HTML 在构建期间生成一次。

// app/blog/[slug]/page.tsx

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const posts = await prisma.post.findMany()
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
 
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default async function Page({ params }: { params: { slug: string } }) {
  // Fetch the post based on slug
  const post = await prisma.post.findUnique({
    where: { slug: params.slug },
  })
  
  // Simple demo rendering
  return (
    <div>
      <h1>{post?.title || 'Post not found'}</h1>
      <p>{post?.content || 'No content available'}</p>
    </div>
  )
}

资源

如何在 Next.js 中使用 Prisma ORM

了解如何从零开始使用 Prisma Postgres 构建一个全栈 Next.js 15 应用！本教程从使用 create-next-app 引导应用开始，并提供了逐步说明，逐步使用 Prisma Postgres 作为数据库添加更多功能。

Next.js Vercel

Next.js 15 + Prisma Postgres 认证示例

这个博客应用演示了如何使用 Prisma Postgres 和 Next.js 15 构建登录功能。它默认使用“通过 GitHub 登录”，并可以轻松扩展到其他身份验证提供商。

Next.js Prisma Postgres

如果您在 React 应用中需要数据库，Next.js 和 Prisma 是终极组合！🚀

吉列尔莫·劳奇 -
CEO & 创始人

的 Vercel

精选 Prisma & Next.js 社区示例

现代 Saas 启动套件：next-forge

现代 SaaS 应用的启动模板！next-forge 包含 Next.js 15、身份验证、数据库和 ORM、支付、文档、博客、o11y、分析、电子邮件等，为您下一个 Next.js SaaS 应用节省了初始样板文件。

阅读教程→

Next.js 中的 Prisma - 我最喜欢的使用数据库的方式

了解在 Next.js App Router 中使用 Prisma 的最佳实践！探索服务器组件、服务器操作和边缘中间件，以及高效查询、处理迁移和部署到 Vercel。完善您的数据库工作流程并无缝扩展！

阅读教程→

t3 Stack

t3 是一个专注于简洁性、模块化和全栈类型安全的 Web 开发堆栈。它包括 Next.js、tRPC、Tailwind、TypeScript、Prisma 和 NextAuth。

在 Github 上探索→观看介绍→

Blitz.js

Blitz.js 是一个基于 Next.js 和 Prisma 构建的应用程序框架。它带回了 Ruby on Rails 等服务器渲染框架的简洁性和约定，同时保留了开发者喜爱 React 和客户端渲染的一切。

访问 Blitz.js 网站→

全栈表单构建器

这个全面的 4 小时教程教您如何构建一个全栈表单应用程序。该表单将是响应式的，允许拖放功能，具有不同类型的布局字段，如标题、副标题和段落，以及各种字段类型，如文本、数字、下拉列表、日期、复选框和文本区域。

观看教程→

加入 Prisma 社区

我们有多个渠道，您可以与我们的社区成员以及 Prisma 团队互动。

Discord

与社区成员和我们的团队实时聊天、交流和分享想法。

查找更多→

GitHub

浏览 Prisma 源代码，发送反馈，并获取技术问题的答案。

查找更多→

X

保持更新，与我们的团队互动，并成为我们充满活力的在线社区不可或缺的一部分。

查找更多→

Youtube

保持更新，与我们的团队互动，并成为我们充满活力的在线社区不可或缺的一部分。

查找更多→