在 Next.js 中使用数据库的最简单方式
与数据库一起

在 Next.js 应用中使用 Prisma 查询 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 查询数据库，以获得完全的渲染灵活性和顶级性能 🚀”