最简单的工作方式
Next.js 中使用数据库

在 Next.js 应用中使用 Prisma 查询来自 MySQL、PostgreSQL 和 SQL Server 数据库的数据 — 适用于 JavaScript 和 TypeScript 的更佳 ORM。

tech

什么是 Prisma?

Prisma 让数据处理变得轻松!它提供类型安全的 Node.js 和 TypeScript ORM、全局数据库缓存、连接池和实时数据库事件。

查询
// Creating a new record
await prisma.user.create({
firstName: “Alice”,
email: “alice@prisma.io”
})
表格
id firstName email
1 Bobby bobby@tables.io
2 Nilufar nilu@email.com
3 Jürgen jums@dums.edu
4 Alice alice@prisma.io

Prisma 和 Next.js 如何协同工作

Next.js 模糊了客户端和服务器之间的界限。它支持在构建时 (SSG) 或请求时 (SSR) 预渲染页面。如果您需要在 Next.js 应用中使用数据库,Prisma 是理想的伴侣。您可以决定是在构建时 (getStaticProps)、请求时 (getServersideProps)、使用 API 路由,还是通过将后端完全分离到独立服务器中,使用 Prisma 访问数据库。

如果您正在将应用部署到 Serverless 或 Edge 环境,请务必查看 Prisma Accelerate 以加速数据库查询。其可扩展的连接池可确保您的数据库即使在流量高峰期也不会耗尽连接。此外,它可以在 Edge 缓存数据库查询的结果,从而加快响应时间,同时减少数据库的负载。

getStaticProps

使用 Prisma 进行静态站点生成

Next.js 中的 getStaticProps 函数在构建时执行,用于静态站点生成 (SSG)。它通常用于静态页面,如博客和营销网站。您可以在 getStaticProps 内部使用 Prisma 向数据库发送查询

1// Fetch all posts (in /pages/index.tsx)
2export async function getStaticProps() {
3 const prisma = new PrismaClient()
4 const posts = await prisma.post.findMany()
5
6 return {
7 props : { posts }
8 }
9}

Next.js 会将 props 传递给您的 React 组件,从而实现使用动态数据静态渲染您的页面。

1// Display list of posts (in /pages/index.tsx)
2export default ({posts}) =>
3 <ul>
4 {posts.map(post => (
5 <li key={post.id}>{post.title}</li>
6 ))}
7 </ul>
8);
getStaticProps
getServerSideProps
API 路由
独立服务器

使用 Prisma 进行静态站点生成

Next.js 中的 getStaticProps 函数在构建时执行,用于静态站点生成 (SSG)。它通常用于静态页面,如博客和营销网站。您可以在 getStaticProps 内部使用 Prisma 向数据库发送查询

1// Fetch all posts (in /pages/index.tsx)
2export async function getStaticProps() {
3 const prisma = new PrismaClient()
4 const posts = await prisma.post.findMany()
5
6 return {
7 props : { posts }
8 }
9}

Next.js 会将 props 传递给您的 React 组件,从而实现使用动态数据静态渲染您的页面。

1// Display list of posts (in /pages/index.tsx)
2export default ({posts}) =>
3 <ul>
4 {posts.map(post => (
5 <li key={post.id}>{post.title}</li>
6 ))}
7 </ul>
8);
getStaticProps

“如果您需要在 React 应用中使用数据库,Next.js 和 Prisma 是终极组合!根据您的需求,您可以在 Next.js API 路由、getServerSidePropsgetStaticProps 中使用 Prisma 查询数据库,以实现完全的渲染灵活性和顶级性能 🚀”

Guillermo RauchGuillermo Rauch -
CEO & 创始人 of Vercel

为什么选择 Prisma 和 Next.js?

完全的渲染灵活性

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

零时间数据库查询

在 getStaticProps 中使用 Prisma 查询数据库,以生成带有动态数据的静态页面。

直接的部署

Prisma 驱动的 Next.js 项目可以部署在 Vercel 上,这是一个为 Next.js 应用构建的平台。

端到端类型安全

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

架构简洁性

对于简单的应用程序,架构复杂性较低 – 随着应用程序的增长扩展架构。

乐于助人的社区

Next.js 和 Prisma 都有活跃的社区,您可以在其中找到支持、有趣的活动和优秀的人。

course

使用 T3 Stack 构建实时聊天应用程序

了解如何使用 T3 Stack 构建实时聊天应用程序:Next.js、tRPC、Tailwind、TypeScript 和 Prisma。该视频还包括数据建模的最佳实践以及身份验证和实时更新等功能。这是一个对现代 Web 技术栈的全面而实用的深入探讨!

talk

使用 Prisma Accelerate 加速您的应用

Prisma Accelerate 是一个连接池和全局缓存,可以加快您的数据库查询速度,尤其是在 Serverless 和 Edge 环境中。观看视频以了解它的具体使用方法以及如何在 Next.js 应用中开始使用它!

精选的 Prisma 和 Next.js 社区示例

t3 Stack

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

使用 Next.js、Tailwind、tRPC 和 Prisma ORM 构建全栈应用

由于其广泛的类型安全保证,Francisco Mendes 在本教程中教授的技术栈是当今构建 Web 应用程序的最健壮的技术栈之一。通过创建一个有趣的杂货清单应用程序,了解具有端到端类型安全性的全栈开发。

Blitz.js

Blitz.js 是一个构建在 Next.js 和 Prisma 之上的应用程序框架。它带回了服务器渲染框架(如 Ruby on Rails)的简洁性和约定,同时保留了开发人员喜爱 React 和客户端渲染的一切。

CoDox

现代 Web 开发的入门模板!CoDox 配备 Next.js 13、TypeScript、Tailwind CSS、Shadcn、tRPC、Clerk Auth 以及更多功能,可为您节省下一个 Next.js 应用的初始样板代码。

全栈表单构建器

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