最简单的工作方式
在 Next.js 中处理数据库

使用 Prisma 在 Next.js 应用中查询 MySQL、PostgreSQL 和 SQL Server 数据库的数据 — 一个更好的 JavaScript 和 TypeScript ORM。

什么是 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);

在 GitHub 上探索

getServerSideProps

API 路由

独立服务器

使用 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);

在 GitHub 上探索

“如果您需要在 React 应用中使用数据库，Next.js 和 Prisma 是终极组合！根据您的需求，您可以在 Next.js API 路由、getServerSideProps 或 getStaticProps 中使用 Prisma 查询数据库，以获得全面的渲染灵活性和顶级性能 🚀”