// 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

获取最新动态，与我们的团队互动，并成为我们活跃在线社区不可或缺的一部分。

了解更多