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

使用 Prisma（一个针对 JavaScript 和 TypeScript 的更佳 ORM）在 Next.js 应用中从 MySQL、PostgreSQL 和 SQL Server 数据库查询数据。

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