最簡單的工作方式
在 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 存取您的資料庫。

如果您要將應用程式部署到無伺服器或邊緣環境，請務必查看 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 是終極組合！根據您的需求，您可以使用 Prisma 在 Next.js API 路由、getServerSideProps 或 getStaticProps 中查詢您的資料庫，以獲得完整的渲染靈活性和頂級效能 🚀”