Next.js Sitefinity CMS用静态生成搭建企业级博客的完整实践指南【免费下载链接】next.jsThe React Framework项目地址: https://gitcode.com/GitHub_Trending/next/next.js本篇指南基于 Next.js 官方仓库中的 cms-sitefinity 示例完整讲解如何以 Sitefinity CMSProgress 出品作为数据源通过 GraphQL 接口结合 Next.js 的 Static GenerationgetStaticPaths/getStaticProps构建一个纯静态生成的 TypeScript 博客站点。读完本文你将掌握 Sitefinity 侧的六步配置流程、环境变量的正确设置方式以及 Next.js 侧数据拉取、URL 转换、Catch-all 路由预渲染的源码级实现细节。示例定位与工程结构该示例是一个静态生成的博客以 Sitefinity CMS 作为内容数据源完整展示了 Next.js Static Generation 特性的典型用法文章列表与文章详情页均在构建期从 CMS 的 GraphQL 接口拉取数据并渲染为静态 HTML。与仓库中其他 CMS 示例不同本示例是 TypeScript 版本目录组织如下均位于 examples/cms-sitefinity 下pages/index.tsx首页聚合全部文章并展示 Hero 位与文章列表pages/posts/[...slug].tsx文章详情页使用 Catch-all 动态路由 getStaticPathslib/api.tsSitefinity GraphQL 客户端封装是数据层核心interfaces/post.ts、interfaces/author.ts前端数据模型类型定义components/layout、hero-post、post-body、post-header、avatar、cover-image、date-formatter等展示组件以及markdown-styles.module.csssitefinity/SitefinityExport.zip可直接导入 CMS 的预置动态模块包.env.local.example环境变量模板。依赖方面package.json 的运行时依赖保持精简classnames、date-fns、nextlatest、react与react-dom均为 18 系开发依赖为typescript、tailwindcss3.x、postcss、autoprefixer及类型声明。构建脚本即标准的next/next build/next start。使用 create-next-app 快速启动通过create-next-app配合 npm、Yarn 或 pnpm 一键脚手架化本示例npx create-next-app --example cms-sitefinity cms-sitefinity-appyarn create next-app --example cms-sitefinity cms-sitefinity-apppnpm create next-app --example cms-sitefinity cms-sitefinity-app执行后会在cms-sitefinity-app目录下得到一份与本示例一致的项目副本随后即可按下面的步骤配置本地 Sitefinity 环境。Sitefinity 侧配置四步完成 CMS 准备Step 1本地安装并运行 Sitefinity版本 ≥ 14.27922按照 Sitefinity 官方文档安装并本地运行 CMS。注意版本下限14.27922低于此版本的导出包与数据结构可能不兼容。Step 2导入预置动态模块 Posts为演示目的官方预先构建了一个可直接使用的动态模块包含两个内容类型Post文章和Author作者。安装步骤打开 CMS 管理后台/Sitefinity进入导出/导入界面/Sitefinity/Administration/Packaging点击 Import Zip file导入 examples/cms-sitefinity/sitefinity/SitefinityExport.zip。导入后即可在 CMS 中创建/编辑文章与作者内容这也是lib/api.ts中 GraphQL 查询字段posts、authorOfPost的数据来源。Step 3启用 Web Service 的匿名访问默认情况下 Sitefinity 的 Web Service 不向匿名用户开放必须先启用否则 Next.js 构建期请求会失败。操作路径进入/sitefinity/Administration/WebServices编辑 Default 这个 Web Service将其访问权限设置为允许 Everyone所有人访问。Step 4安装 GraphQL 扩展包添加 Sitefinity CMS 的 NuGet 包源安装Progress.Sitefinity.GraphQL包安装时需启用 prerelease 过滤条件。该包为 Sitefinity 的 Default Web Service 暴露graphql端点这正是前端fetch请求的目标地址。环境变量配置.env.local复制本目录下的环境变量模板cp .env.local.example .env.local.env.local已被.gitignore忽略cp .env.local.example .env.local然后在.env.local中设置两个变量与 examples/cms-sitefinity/.env.local.example 的占位内容一一对应变量含义示例值SF_API_URLStep 3 中配置的 Default Web Service 地址http://localhost/api/default/SF_URLSitefinity CMS 站点本身的 URLhttp://localhost/从源码可以确认这两个变量的具体用途lib/api.ts 中 GraphQL 端点由process.env.SF_API_URL graphql拼接而成注意SF_API_URL需要以/结尾而SF_URL则用于transformImageUrl函数lib/api.ts——当 CMS 返回的图片 URL 是站内相对路径如/Resources/...时自动补全为${SF_URL}前缀保证静态生成的 HTML 中图片链接可被公网访问。运行开发模式npm install npm run dev # or yarn yarn dev配置完成后博客运行在 http://localhost:3000。生产构建则执行npm run buildnpm run start脚本见 package.json。源码解析Static Generation 的完整数据流数据层GraphQL 客户端封装lib/api.ts 提供了三个对外函数全部通过executeGraphQLForBlogPosts向${SF_API_URL}graphql发起 POST 请求Content-Type: application/json并从响应的response[data][posts]节点取数getAllPostSlugsFromCms()查询所有文章的itemDefaultUrl字段并映射为 slug 数组供getStaticPaths使用getPostBySlugFromCms(slug)通过过滤条件posts(_filter: {itemDefaultUrl: {_eq: ${slug}}})精确查询单篇文章返回字段包括title、excerpt、content、dateCreated、itemDefaultUrl、openGraphImage、coverImage及关联的authorOfPost含title与picturegetAllPostsFromCms()无过滤地拉取全部文章字段供首页使用。mapCmsBlog函数负责把 CMS 返回的原始结构CmsPost接口定义于 lib/api.ts映射为前端类型slug取自itemDefaultUrldate取自dateCreated作者取authorOfPost[0]的标题与头像coverImage/ogImage均经过transformImageUrl补全。映射结果满足 interfaces/post.ts 定义的PostTypeslug、title、date、coverImage、author、excerpt、ogImage、content其中author对应 interfaces/author.ts 的{ name, picture }。首页getStaticProps一次性拉全量pages/index.tsx 在构建期调用getAllPostsFromCms()取allPosts[0]作为 Hero 大卡、其余部分传入MoreStories列表组件渲染。由于未配置revalidate页面在每次构建时重新生成一次。详情页Catch-all 路由 getStaticPathspages/posts/[...slug].tsx 是 Static Generation 的核心展示getStaticPaths#L72-L85调用getAllPostSlugsFromCms()将 CMS 的itemDefaultUrl如/my-first-post按/切分并splice(1)成数组匹配 Catch-all 路由slug: string[]fallback: false表示未预渲染的路径直接返回 404不做按需生成getStaticProps#L61-L70将参数数组重新拼接为/ params.slug.join(/)后查询单篇命中失败时post为null404 兜底组件内if (!router.isFallback !post?.slug) return ErrorPage statusCode{404} /并借助router.isFallback在预渲染回退阶段显示 Loading… 占位标题。另外值得注意getStaticProps中存在一处遗留的debugger语句#L62属于示例调试残留实际项目中应移除。展示层Markdown 正文与 Tailwind 排版文章正文由 CMS 直接输出 HTMLcomponents/post-body.tsx 通过dangerouslySetInnerHTML注入并用 CSS Modulesmarkdown-styles.module.css约束排版宽度max-w-2xl mx-auto。pages/_app.tsx 注入全局样式styles/index.cssTailwind 配置见 tailwind.config.js其content覆盖./components/**/*.tsx与./pages/**/*.tsx并扩展了accent-*、success、cyan等配色与28间距、自定义阴影等设计变量。站点常量如CMS_NAME Sitefinity集中定义在 lib/constants.ts用于页面title拼接。横向参考Next.js 仓库中的其他 CMS 示例本 README 同时维护了一份完整的 CMS 集成示例索引覆盖 Headless CMS 主流厂商均可作为同类架构CMS 数据源 Static Generation的对照参考AgilityCMS、Builder.io、ButterCMS、Contentful、Cosmic、DatoCMS、DotCMS、Drupal、Enterspeed、Ghost、GraphCMS、Kontent.ai、MakeSwift、Payload、Plasmic、Prepr、Prismic、Sanity、Sitecore XM Cloud、Sitefinity、Storyblok、TakeShape、Tina、Umbraco、Umbraco Heartcore、Webiny、WordPress、Blog Starter与 Sitefinity 这类服务端托管 CMS数据通过其自带 Web Service 暴露相比多数 Headless CMS 走的是官方 REST/GraphQL API API Token 鉴权的模式而本示例展示了另一种集成形态复用 CMS 自身的 Web Service 基础设施通过 NuGet 扩展包启用 GraphQL鉴权则依赖 Web Service 的匿名权限配置。小结cms-sitefinity示例的价值在于提供了一个端到端、可复现的企业级 CMS 集成范本CMS 侧四步本地安装、导入动态模块、开放 Web Service、加装 GraphQL 包 前端侧两个环境变量 标准 Next.js 构建即可跑通构建期拉取 → 静态生成 → 404 兜底的完整链路。其数据层封装lib/api.ts的查询模板与字段映射、类型层PostType/Author与路由层Catch-all fallback: false的划分方式可直接迁移到其他需要对接传统 .NET 系 CMS 的 Next.js 项目中。【免费下载链接】next.jsThe React Framework项目地址: https://gitcode.com/GitHub_Trending/next/next.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考