// app/blog/[slug]/page.tsx

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const posts = await prisma.post.findMany()
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
 
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default async function Page({ params }: { params: { slug: string } }) {
  // Fetch the post based on slug
  const post = await prisma.post.findUnique({
    where: { slug: params.slug },
  })
  
  // Simple demo rendering
  return (
    <div>
      <h1>{post?.title || 'Post not found'}</h1>
      <p>{post?.content || 'No content available'}</p>
    </div>
  )
}

動態資料

伺服器操作

API 路由

客戶端元件

使用 Prisma 進行靜態站點生成

以下是如何實現一個在構建時靜態生成的部落格頁面。資料獲取發生在伺服器端，HTML 在構建過程中生成一次。

// app/blog/[slug]/page.tsx

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const posts = await prisma.post.findMany()
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
 
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default async function Page({ params }: { params: { slug: string } }) {
  // Fetch the post based on slug
  const post = await prisma.post.findUnique({
    where: { slug: params.slug },
  })
  
  // Simple demo rendering
  return (
    <div>
      <h1>{post?.title || 'Post not found'}</h1>
      <p>{post?.content || 'No content available'}</p>
    </div>
  )
}

資源

如何在 Next.js 中使用 Prisma ORM

學習如何從零開始使用 Prisma Postgres 構建一個全棧 Next.js 15 應用程式！本教程從使用 `create-next-app` 引導應用程式開始，並提供逐步說明，指導您如何逐步使用 Prisma Postgres 作為資料庫新增更多功能。

Next.js Vercel

Next.js 15 + Prisma Postgres 認證示例

這個部落格應用程式演示瞭如何使用 Prisma Postgres 和 Next.js 15 構建登入和功能。它預設使用“GitHub 登入”，並且可以輕鬆擴充套件到其他身份驗證提供商。

Next.js Prisma Postgres

如果您需要在 React 應用程式中使用資料庫，Next.js 和 Prisma 是**終極組合**！🚀

Guillermo Rauch -
執行長兼創始人

的 Vercel

精選 Prisma 和 Next.js 社群示例

現代 SaaS 啟動套件：next-forge

一個現代 SaaS 應用程式的啟動模板！next-forge 包含了 Next.js 15、認證、資料庫和 ORM、支付、文件、部落格、可觀察性、分析、電子郵件以及更多功能，為您節省了下一個 Next.js SaaS 應用程式的初始樣板程式碼。

閱讀教程

Next.js 中的 Prisma - 我最喜歡使用資料庫的方式

學習在 Next.js App Router 中使用 Prisma 的最佳實踐！探索伺服器元件、伺服器操作和邊緣中介軟體，以及高效查詢、處理遷移和部署到 Vercel。完善您的資料庫工作流程並無縫擴充套件！

閱讀教程

t3 技術棧

t3 是一個專注於簡潔性、模組化和全棧型別安全的 Web 開發技術棧。它包括 Next.js、tRPC、Tailwind、TypeScript、Prisma 和 NextAuth。

在 Github 上探索觀看介紹

Blitz.js

Blitz.js 是一個基於 Next.js 和 Prisma 構建的應用程式框架。它帶回了像 Ruby on Rails 這樣的伺服器渲染框架的簡潔性和約定，同時保留了開發者喜愛 React 和客戶端渲染的所有優點。

訪問 Blitz.js 網站

全棧表單構建器

這個長達 4 小時的綜合教程將教您如何構建一個全棧表單應用程式。該表單將是響應式的，支援拖放功能，並提供不同型別的佈局欄位，如標題、副標題和段落，以及各種型別的欄位，如文字、數字、下拉選單、日期、複選框和文字區域。

觀看教程

加入 Prisma 社群

我們有多個渠道，您可以在其中與社群成員以及 Prisma 團隊互動。

Discord

與社群成員和我們的團隊即時聊天、交流並分享想法。

瞭解更多

GitHub

瀏覽 Prisma 原始碼，傳送反饋，並獲得技術問題的答案。

瞭解更多

X

獲取最新動態，與我們的團隊互動，併成為我們活躍線上社群不可或缺的一部分。

瞭解更多

Youtube

獲取最新動態，與我們的團隊互動，併成為我們活躍線上社群不可或缺的一部分。

瞭解更多