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

使用 Prisma 从 MySQL、PostgreSQL 和 SQL Server 数据库中查询数据，Prisma 是一个更适合 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 访问您的数据库。

如果您将应用程序部署到无服务器或边缘环境，请务必查看 Prisma Accelerate 以加速您的数据库查询。其可扩展的连接池确保您的数据库即使在流量高峰期间也不会出现连接耗尽的情况。此外，它可以在边缘缓存数据库查询的结果，从而加快响应时间，同时减轻数据库的负载。

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 查询您的数据库，以实现完全的渲染灵活性并获得最佳性能 🚀”