Next.js 搭配 Headless CMS 搞网站真香！

早就听说过 Headless CMS，但一直没在项目中使用过。最近，在构建一个基于 Next.js 的 SaaS 模板，其中博客是一个重要部分，对后期的 SEO 非常关键。这次正好借此机会尝试一下 Headless CMS。

Headless CMS 简介

Headless CMS 是一种将内容存储和展示分离的内容管理系统。开发者可以通过 API 获取内容，并在前端自由展示。其优点包括：

• 灵活性：可以在不同平台上展示相同的内容。
• 可扩展性：易于集成第三方服务和工具。
• 开发效率：前后端分离，开发者可以专注于各自的领域。

Sanity CMS 的优势

Sanity 是一个强大的 Headless CMS，提供了实时协作和内容版本控制等功能。其主要优势包括：

• 实时编辑：支持多人同时编辑内容，实时更新。
• 可定制性：通过 Sanity Studio，开发者可以自定义内容模型和编辑界面。
• 强大的 API：提供灵活的查询语言，便于获取和管理内容。

选择 Sanity 的原因之一是它的免费额度非常慷慨，足以满足大多数普通项目的需求。

Sanity 官方对 Next.js 的支持很好，提供了 next-sanity 库，方便与 Next.js 项目集成。集成后，可以通过通用的 /studio 路径访问本地的 Sanity Studio。在 Sanity Studio 中，你可以轻松创建和管理内容模型。

除了通过 Sanity Studio 管理内容外，还可以通过 API 管理内容。特别是在批量导入内容时，API 的支持使得通过脚本导入内容变得简单。比如，这次做的小报童专栏导航站 ，就是通过脚本批量导入数据。导入过程中还需要处理图片，所以相比导入文本数据稍微复杂一些。

需要注意的是，使用 Sanity API 需要了解 Sanity 开源的 Sanity Query Language —— GROQ，这是一种功能强大且易学的查询语言。

*[_type == "post"] {
   _id,
  title,
  slug,
  publishedAt
}
1.
2.
3.
4.
5.
6.

使用 GROQ，你可以准确描述应用程序所需的信息，连接来自不同文档的信息，并只返回所需的字段。不过，现在有了 AI 辅助工具的加持，比如，功能超强的 Cursor IDE，只需给出预期结果，它就能生成对应的 GROQ 查询语句，整个开发过程非常顺畅。

网站部署

Cloudflare 是一个活菩萨，提供了很多免费的服务。网站开发完成后，我直接将其部署到 Cloudflare Pages。部署过程很简单，与 GitHub 集成后，每次 Push 代码，Cloudflare 就会自动部署。

不过，部署时遇到了一个问题：Sanity Studio 生成的 Worker 脚本太大，超过了 Cloudflare Worker 免费账户 1M 的限制。最后，我采取了比较简单粗暴的方式，在打包过程中移除 Sanity Studio。不然，之前正式环境是通过 middleware.ts 来控制 /studio 的访问。

网站演示

https://xiaobot.batchtool.com/

专栏分类页

搜索页

目前站点的功能还比较简单，还有其他一些已知功能尚未开发，近期有空会慢慢补充。网站开发完后，感觉 R2 + D1 + Pages All in Cloudflare 的方案，应该也挺不错。关于 Headless CMS，还有 Strapi CMS、Payload 或 directus 等开源的方案。