Next.js 静态生成博客实战基于 Prismic CMS 的内容驱动型官网搭建指南【免费下载链接】next.jsThe React Framework项目地址: https://gitcode.com/GitHub_Trending/next/next.js本文以 Next.js 仓库中的examples/cms-prismic示例为蓝本讲解如何用 Prismic 作为数据源构建一个静态生成Static Generation博客站点涵盖通过 Slice Machine 初始化内容模型、填充内容、本地开发、Preview 预览草稿以及部署上线的完整流程并结合示例源码说明getStaticProps/getStaticPaths的数据拉取逻辑与 Preview Mode 的底层实现机制读完你可以独立搭建并理解一个 CMS 驱动的博客系统。示例定位用 Prismic 做数据源的静态生成博客该示例展示了 Next.js 的 Static Generation 特性以 Prismic{ apiEndpoint: https://nextjs-example-cms-prismic.prismic.io/api/v2, libraries: [/slices], localSliceSimulatorURL: http://localhost:3000/slice-simulator, _latest: 0.4.2 }其中apiEndpoint指向 Prismic 内容 APIlibraries指向 Slice 组件库目录localSliceSimulatorURL是 Slice Simulator 页面的本地地址。依赖方面package.json 声明了prismicio/client、prismicio/helpers、prismicio/next、prismicio/react、prismicio/slice-simulator-react、prismic-ts-codegen等官方 SDK以及slice-machine-uiSlice Machine 开发工具说明该示例完整覆盖了「内容建模—本地开发—代码生成—预览—部署」的 Prismic 工作流。快速启动create-next-app 脚手架使用create-next-app配合--example参数即可一键拉起示例项目支持 npm、Yarn、pnpm 三种方式npx create-next-app --example cms-prismic cms-prismic-appyarn create next-app --example cms-prismic cms-prismic-apppnpm create next-app --example cms-prismic cms-prismic-app脚手架执行后你得到的就是本文分析的 examples/cms-prismic 目录结构pages/路由、slices/Slice 组件、customtypes/内容模型定义、components/页面组件、lib/工具函数。配置步骤一创建 Prismic 账户与内容仓库在项目中执行以下命令完成 Prismic 仓库初始化npx slicemachine/init该命令会依次完成三件事要求你登录 Prismic 或创建账户创建一个预置了 Author 和 Post 两种内容模型content model的新 Prismic 仓库将 Prismic 仓库与你的应用建立连接。可选启动 Slice Machine 查看预置的内容模型npm run slicemachine启动后 Slice Machine 界面运行在 http://localhost:9999。这里的「内容模型」在仓库中以 JSON 文件形式落地例如 customtypes/post/index.json 定义了post文档类型包含以下字段字段类型说明titleStructuredText文章标题单一 heading1uidUID文章 URL slugdateDate发布日期authorLinkdocument关联author类型文档excerptText摘要cover_imageImage封面图slicesSlicesSlice Zone承载正文内容块这种「字段即 schema」的设计与前端类型系统是联动的lib/types.ts 中通过Content.PostDocument扩展出带 author 关联字段文档类型PostDocumentWithAuthor由prismic-ts-codegen依据prismicCodegen.config.ts生成保证拉取数据的字段访问有类型约束。配置步骤二填充内容Author 与 Post 文档进入 Prismic 控制台选择你的仓库点击Create new先创建一个Author类型文档——只需 1 个即可文本用占位数据头像可从 Unsplash 下载保存后务必点击Publish返回文档列表再创建至少2 个 Post类型文档正文使用 Text 和 Image 两种 Slice 组合封面图同样可用 Unsplash 图片并关联上一步创建的 author。重要提示每个文档保存后必须点击Publish发布否则文档处于草稿draft状态站点查询不到。配置步骤三本地开发npm run dev # 或 yarn dev博客运行在 http://localhost:3000。从源码看首页与文章页的数据都通过 Prismic 客户端在构建/静态生成阶段拉取首页pages/index.tsxgetStaticProps中调用client.getAllByType(post, { fetchLinks: [...], orderings: [{ field: my.post.date, direction: desc }] })按发布日期倒序取回全部已发布文章fetchLinks同时拉取关联 author 的name与picture字段页面将第一篇作为HeroPost头条其余交给MoreStories组件展示。文章页pages/posts/[slug].tsxgetStaticPaths同样调用getAllByType(post)并返回{ paths: allPosts.map((post) post.url), fallback: true }——fallback: true意味着构建后新增的文章也能被访问浏览器先看到加载占位对应组件中router.isFallback ? PostTitleLoading…/PostTitle : ...服务端再按需生成getStaticProps用client.getByUID(post, params.slug)精确取文并用predicate.not(my.post.uid, params.slug)排除当前文章后取最近 2 篇作为「更多文章」区块查不到时返回notFound: true。两个页面共用的 Prismic 客户端封装在 lib/prismic.tsconst routes: prismic.Route[] [ { type: post, path: /posts/:uid, }, ]; export const createClient ({ previewData, req, ...config }: prismicNext.CreateClientConfig {}) { const client prismic.createClient(sm.apiEndpoint, { routes, ...config, }); prismicNext.enableAutoPreviews({ client, previewData, req }); return client; };两个关键设计值得注意routes声明告诉 Prismic 客户端post类型文档的访问路径是/posts/:uid这样post.urlgetStaticPaths与首页链接跳转都依赖它能自动解析为/posts/uidenableAutoPreviewsprismicio/next提供的辅助函数根据传入的previewData或req自动切换到草稿查询模式是整个 Preview 功能的核心开关。配置步骤四体验 Preview Mode草稿预览在 Prismic 仓库页面的Settings → Previews → Create a New Preview中填写开发预览配置Site Name任意如 DevelopmentDomain of Your Applicationhttp://localhost:3000Link Resolver/api/preview。保存后打开任意一篇文章文档修改标题例如在标题前加[Draft]点击Save但不要点击Publish使文档保持草稿状态然后点击Publish按钮旁带眼睛图标的Preview按钮。此时浏览器即可看到修改后的草稿标题点击页面左下角紫色 Prismic 工具栏中的 x 图标可退出预览模式。这条流程在源码中对应两个 API 路由pages/api/preview.tsPrismic 的 Link Resolver 回调端点。它用createClient({ req })创建客户端先调用setPreviewData({ req, res })写入预览 CookieNext.js Preview Mode 的令牌再调用redirectToPreviewURL({ req, res, client })解析 Prismic 查询串?prismic-preview...并 302 跳转到目标文档页。后续请求命中getStaticProps时previewData存在enableAutoPreviews就会让客户端以草稿身份查询内容pages/api/exit-preview.ts调用exitPreview({ res, req })清除预览 Cookie 并跳回原页对应界面上「退出预览」的入口——components/alert.tsx 在preview为 true 时展示提示条并链接到/api/exit-preview。也就是说README 里「点 Preview 按钮」与「点 x 退出」这两步 UI 操作底层就是/api/preview设置预览态、/api/exit-preview清除预览态这一对端点在驱动。Slice 机制正文内容块的组件化渲染Prismic 用 Slice 将正文拆成可复用的内容块。示例提供 Text 与 Image 两种 Slice注册表 slices/index.js由 Slice Machine 生成将其映射到组件export const components { image: Image, text: Text, };文章正文通过 components/post-body.tsx 渲染export default function PostBody({ slices }: PostBodyProps) { return ( div classNamemax-w-2xl mx-auto SliceZone slices{slices} components{components} / /div ); }SliceZone按文档中 slices 数组的顺序逐一匹配components映射并渲染。以 slices/Text/index.tsx 为例它用prismicio/react的PrismicRichText将富文本字段映射为带 Tailwind 样式的 React 组件heading2、heading3、paragraph、list、oList这是 Prismic 富文本结构到 JSX 的标准转换模式。此外示例还内置了 Slice Simulator 页面 pages/slice-simulator.tsx它使用prismicio/slice-simulator-react的SliceSimulator组件在http://localhost:3000/slice-simulator上预览每个 Slice 的各种数据变体供编辑与开发两侧对齐预期效果。配置步骤五部署上线将项目推送至代码托管平台并导入 Vercel 即可部署也可以直接使用 README 提供的模板一键部署需配置PRISMIC_API_TOKEN、PRISMIC_REPOSITORY_NAME两个环境变量来连接你的 Prismic 仓库。仓库内的 next.config.js 与 tsconfig.json 均已就绪无需额外调整构建配置。与其他 CMS 示例的关系该示例并非孤立存在examples/cms-prismic/README.md 末尾列出了仓库内一系列同构的 CMS 集成示例例如 examples/cms-contentful、examples/cms-datocms、examples/cms-graphcms、examples/cms-storyblok、examples/cms-wordpress、examples/cms-tina 等以及一个不依赖 CMS 的 examples/blog-starter。这些示例共享相同的「静态生成 Preview Mode」骨架若你熟悉其中任意一个切换到 Prismic 的主要成本在于替换数据层客户端与内容模型页面层结构基本一致。小结数据流Prismic 内容仓库 →prismicio/clientlib/prismic.ts 封装→getStaticProps/getStaticPaths静态生成 → 静态 HTML路由约定routes中声明的/posts/:uid与 pages/posts/[slug].tsx 的动态路由一一对应预览闭环Prismic Preview 按钮 →/api/previewsetPreviewDataredirectToPreviewURL→ 草稿态渲染 components/alert.tsx 提示条 →/api/exit-previewexitPreview退出内容建模customtypes/下的 JSON 模型驱动 Prismic 编辑界面prismic-ts-codegen生成的Content.*类型驱动前端类型安全Slice 组件通过SliceZone完成正文渲染。【免费下载链接】next.jsThe React Framework项目地址: https://gitcode.com/GitHub_Trending/next/next.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Next.js 静态生成博客实战：基于 Prismic CMS 的内容驱动型官网搭建指南
Next.js 静态生成博客实战基于 Prismic CMS 的内容驱动型官网搭建指南【免费下载链接】next.jsThe React Framework项目地址: https://gitcode.com/GitHub_Trending/next/next.js本文以 Next.js 仓库中的examples/cms-prismic示例为蓝本讲解如何用 Prismic 作为数据源构建一个静态生成Static Generation博客站点涵盖通过 Slice Machine 初始化内容模型、填充内容、本地开发、Preview 预览草稿以及部署上线的完整流程并结合示例源码说明getStaticProps/getStaticPaths的数据拉取逻辑与 Preview Mode 的底层实现机制读完你可以独立搭建并理解一个 CMS 驱动的博客系统。示例定位用 Prismic 做数据源的静态生成博客该示例展示了 Next.js 的 Static Generation 特性以 Prismic{ apiEndpoint: https://nextjs-example-cms-prismic.prismic.io/api/v2, libraries: [/slices], localSliceSimulatorURL: http://localhost:3000/slice-simulator, _latest: 0.4.2 }其中apiEndpoint指向 Prismic 内容 APIlibraries指向 Slice 组件库目录localSliceSimulatorURL是 Slice Simulator 页面的本地地址。依赖方面package.json 声明了prismicio/client、prismicio/helpers、prismicio/next、prismicio/react、prismicio/slice-simulator-react、prismic-ts-codegen等官方 SDK以及slice-machine-uiSlice Machine 开发工具说明该示例完整覆盖了「内容建模—本地开发—代码生成—预览—部署」的 Prismic 工作流。快速启动create-next-app 脚手架使用create-next-app配合--example参数即可一键拉起示例项目支持 npm、Yarn、pnpm 三种方式npx create-next-app --example cms-prismic cms-prismic-appyarn create next-app --example cms-prismic cms-prismic-apppnpm create next-app --example cms-prismic cms-prismic-app脚手架执行后你得到的就是本文分析的 examples/cms-prismic 目录结构pages/路由、slices/Slice 组件、customtypes/内容模型定义、components/页面组件、lib/工具函数。配置步骤一创建 Prismic 账户与内容仓库在项目中执行以下命令完成 Prismic 仓库初始化npx slicemachine/init该命令会依次完成三件事要求你登录 Prismic 或创建账户创建一个预置了 Author 和 Post 两种内容模型content model的新 Prismic 仓库将 Prismic 仓库与你的应用建立连接。可选启动 Slice Machine 查看预置的内容模型npm run slicemachine启动后 Slice Machine 界面运行在 http://localhost:9999。这里的「内容模型」在仓库中以 JSON 文件形式落地例如 customtypes/post/index.json 定义了post文档类型包含以下字段字段类型说明titleStructuredText文章标题单一 heading1uidUID文章 URL slugdateDate发布日期authorLinkdocument关联author类型文档excerptText摘要cover_imageImage封面图slicesSlicesSlice Zone承载正文内容块这种「字段即 schema」的设计与前端类型系统是联动的lib/types.ts 中通过Content.PostDocument扩展出带 author 关联字段文档类型PostDocumentWithAuthor由prismic-ts-codegen依据prismicCodegen.config.ts生成保证拉取数据的字段访问有类型约束。配置步骤二填充内容Author 与 Post 文档进入 Prismic 控制台选择你的仓库点击Create new先创建一个Author类型文档——只需 1 个即可文本用占位数据头像可从 Unsplash 下载保存后务必点击Publish返回文档列表再创建至少2 个 Post类型文档正文使用 Text 和 Image 两种 Slice 组合封面图同样可用 Unsplash 图片并关联上一步创建的 author。重要提示每个文档保存后必须点击Publish发布否则文档处于草稿draft状态站点查询不到。配置步骤三本地开发npm run dev # 或 yarn dev博客运行在 http://localhost:3000。从源码看首页与文章页的数据都通过 Prismic 客户端在构建/静态生成阶段拉取首页pages/index.tsxgetStaticProps中调用client.getAllByType(post, { fetchLinks: [...], orderings: [{ field: my.post.date, direction: desc }] })按发布日期倒序取回全部已发布文章fetchLinks同时拉取关联 author 的name与picture字段页面将第一篇作为HeroPost头条其余交给MoreStories组件展示。文章页pages/posts/[slug].tsxgetStaticPaths同样调用getAllByType(post)并返回{ paths: allPosts.map((post) post.url), fallback: true }——fallback: true意味着构建后新增的文章也能被访问浏览器先看到加载占位对应组件中router.isFallback ? PostTitleLoading…/PostTitle : ...服务端再按需生成getStaticProps用client.getByUID(post, params.slug)精确取文并用predicate.not(my.post.uid, params.slug)排除当前文章后取最近 2 篇作为「更多文章」区块查不到时返回notFound: true。两个页面共用的 Prismic 客户端封装在 lib/prismic.tsconst routes: prismic.Route[] [ { type: post, path: /posts/:uid, }, ]; export const createClient ({ previewData, req, ...config }: prismicNext.CreateClientConfig {}) { const client prismic.createClient(sm.apiEndpoint, { routes, ...config, }); prismicNext.enableAutoPreviews({ client, previewData, req }); return client; };两个关键设计值得注意routes声明告诉 Prismic 客户端post类型文档的访问路径是/posts/:uid这样post.urlgetStaticPaths与首页链接跳转都依赖它能自动解析为/posts/uidenableAutoPreviewsprismicio/next提供的辅助函数根据传入的previewData或req自动切换到草稿查询模式是整个 Preview 功能的核心开关。配置步骤四体验 Preview Mode草稿预览在 Prismic 仓库页面的Settings → Previews → Create a New Preview中填写开发预览配置Site Name任意如 DevelopmentDomain of Your Applicationhttp://localhost:3000Link Resolver/api/preview。保存后打开任意一篇文章文档修改标题例如在标题前加[Draft]点击Save但不要点击Publish使文档保持草稿状态然后点击Publish按钮旁带眼睛图标的Preview按钮。此时浏览器即可看到修改后的草稿标题点击页面左下角紫色 Prismic 工具栏中的 x 图标可退出预览模式。这条流程在源码中对应两个 API 路由pages/api/preview.tsPrismic 的 Link Resolver 回调端点。它用createClient({ req })创建客户端先调用setPreviewData({ req, res })写入预览 CookieNext.js Preview Mode 的令牌再调用redirectToPreviewURL({ req, res, client })解析 Prismic 查询串?prismic-preview...并 302 跳转到目标文档页。后续请求命中getStaticProps时previewData存在enableAutoPreviews就会让客户端以草稿身份查询内容pages/api/exit-preview.ts调用exitPreview({ res, req })清除预览 Cookie 并跳回原页对应界面上「退出预览」的入口——components/alert.tsx 在preview为 true 时展示提示条并链接到/api/exit-preview。也就是说README 里「点 Preview 按钮」与「点 x 退出」这两步 UI 操作底层就是/api/preview设置预览态、/api/exit-preview清除预览态这一对端点在驱动。Slice 机制正文内容块的组件化渲染Prismic 用 Slice 将正文拆成可复用的内容块。示例提供 Text 与 Image 两种 Slice注册表 slices/index.js由 Slice Machine 生成将其映射到组件export const components { image: Image, text: Text, };文章正文通过 components/post-body.tsx 渲染export default function PostBody({ slices }: PostBodyProps) { return ( div classNamemax-w-2xl mx-auto SliceZone slices{slices} components{components} / /div ); }SliceZone按文档中 slices 数组的顺序逐一匹配components映射并渲染。以 slices/Text/index.tsx 为例它用prismicio/react的PrismicRichText将富文本字段映射为带 Tailwind 样式的 React 组件heading2、heading3、paragraph、list、oList这是 Prismic 富文本结构到 JSX 的标准转换模式。此外示例还内置了 Slice Simulator 页面 pages/slice-simulator.tsx它使用prismicio/slice-simulator-react的SliceSimulator组件在http://localhost:3000/slice-simulator上预览每个 Slice 的各种数据变体供编辑与开发两侧对齐预期效果。配置步骤五部署上线将项目推送至代码托管平台并导入 Vercel 即可部署也可以直接使用 README 提供的模板一键部署需配置PRISMIC_API_TOKEN、PRISMIC_REPOSITORY_NAME两个环境变量来连接你的 Prismic 仓库。仓库内的 next.config.js 与 tsconfig.json 均已就绪无需额外调整构建配置。与其他 CMS 示例的关系该示例并非孤立存在examples/cms-prismic/README.md 末尾列出了仓库内一系列同构的 CMS 集成示例例如 examples/cms-contentful、examples/cms-datocms、examples/cms-graphcms、examples/cms-storyblok、examples/cms-wordpress、examples/cms-tina 等以及一个不依赖 CMS 的 examples/blog-starter。这些示例共享相同的「静态生成 Preview Mode」骨架若你熟悉其中任意一个切换到 Prismic 的主要成本在于替换数据层客户端与内容模型页面层结构基本一致。小结数据流Prismic 内容仓库 →prismicio/clientlib/prismic.ts 封装→getStaticProps/getStaticPaths静态生成 → 静态 HTML路由约定routes中声明的/posts/:uid与 pages/posts/[slug].tsx 的动态路由一一对应预览闭环Prismic Preview 按钮 →/api/previewsetPreviewDataredirectToPreviewURL→ 草稿态渲染 components/alert.tsx 提示条 →/api/exit-previewexitPreview退出内容建模customtypes/下的 JSON 模型驱动 Prismic 编辑界面prismic-ts-codegen生成的Content.*类型驱动前端类型安全Slice 组件通过SliceZone完成正文渲染。【免费下载链接】next.jsThe React Framework项目地址: https://gitcode.com/GitHub_Trending/next/next.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考