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

作者：kakuqo 2024-11-15 08:12:48

開發前端

Headless CMS 是一種將內容存儲和展示分離的內容管理系統。開發者可以通過 API 獲取內容，并在前端自由展示。

早就聽說過 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
}

使用 GROQ，你可以準確描述應用程序所需的信息，連接來自不同文檔的信息，并只返回所需的字段。不過，現在有了 AI 輔助工具的加持，比如，功能超強的 Cursor IDE，只需給出預期結果，它就能生成對應的 GROQ 查詢語句，整個開發過程非常順暢。

網站部署

Cloudflare 是一個活菩薩，提供了很多免費的服務。網站開發完成后，我直接將其部署到 Cloudflare Pages。部署過程很簡單，與 GitHub 集成后，每次 Push 代碼，Cloudflare 就會自動部署。

不過，部署時遇到了一個問題：Sanity Studio 生成的 Worker 腳本太大，超過了 Cloudflare Worker 免費賬戶 1M 的限制。最后，我采取了比較簡單粗暴的方式，在打包過程中移除 Sanity Studio。不然，之前正式環境是通過 middleware.ts 來控制 /studio 的訪問。