什么是 Headless CMS？
传统 CMS （Content Management System）、如 WordPress，是将内容的管理和前端网站的构建混在一起，一般采用 PHP、Python 或 Ruby on Rails 等语言进行开发。
而 Headless CMS 则是一种新兴的 CMS，它将内容的管理和网站的构建进行分离。Headless CMS 不关心如何呈现内容，而是专注于提供一种标准化的 RESTful API 方式获取内容，方便前端开发人员进行自由的开发。
一般来说，Headless CMS 支持多种数据格式，包括但不限于 Markdown、HTML、JSON、XML 等格式。通过 Headless CMS，前端开发人员可以轻松取得所需的数据，这能大大简化前端开发的流程。
为什么使用 Headless CMS？
- 在现代前端开发环境下，Headless CMS 提供了一种更加标准化的内容管理方式，与前端解耦，可以更好地支持前后端分离。
- 通过使用 Headless CMS，前端可更加灵活地选择技术栈，同时，Headless CMS 也不关心前端技术的选用。
- Headless CMS 专注于内容，而不是呈现内容的方式，因此，Headless CMS 开发者可将更多的注意力集中在如何优化内容本身，而不用关心具体呈现方式的效果。
什么是 Next.js？
Next.js 是基于 React 的一个轻量级框架，可使用它构建可扩展的、高度定制化的 Web 应用程序。
Next.js 集成了多种有用的功能，如渲染服务器端代码、自动优化、选取 CSS 和支持 SPA（Single-Page Application）等功能。此外，Next.js 还支持同构应用程序和动态导出等高级功能。
Next.js 支持使用多种不同的数据源，包括 JSON 文件、API 数据和动态服务器内容。因此，Next.js 与 Headless CMS 配合使用，搭建一个高速网站是相当容易的。
下面介绍一下如何使用 Headless CMS 和 Next.js 构建一个简单的博客网站。
配置 Headless CMS
我们可以使用 Strapi 作为 Headless CMS，Strapi 提供了一个基本的博客功能。
- 解压下载的 Strapi 压缩包，并进入 Strapi 目录中，根据官方文档进行安装和启动。
- 安装 Strapi 前端插件:
npm install strapi-plugin-content-manager。 - 在 Strapi 后台中，新建一个
Blog Post和Category的内容，以及前端展示所需的字段等。
配置 Next.js
- 创建一个新的 Next.js 应用程序:
npx create-next-app blog-website。 - 安装所需的 API 服务:
npm install axios.
从 Headless CMS 获取数据
我们需要从 Strapi中获取数据，并在 Next.js 中进行展示。
- 在 Next.js 中创建一个名为
blog_post.js的文件，并添加以下代码:
import axios from 'axios';
export default async (req, res) => {
const response = await axios.get('http://localhost:1337/blog-posts');
res.send(response.data);
};- 在 Next.js 的
index.js文件中编写前端代码，将获取到的数据展示出来。
在 Strapi 后台中，新建好的数据与分类：
在 Next.js 中，通过调用blog_post.js文件，获取数据，并在页面上展示。
-- -------------------- ---- -------
------ ----- ---- -------
------ ----- ---- -------
------ ----- ------------------ - ----- -- -- -
----- - ---- - - ----- ----------------------------------------------
------ -
------ -
---------- ----
-
-
-
----- ---- - -- --------- -- -- -
------ -
--
------ ---------
--------------------- -- -
---- --------------
---------------------
---- -------------------------- ------- ----------- --
------
---
---
-
-
------ ------- ----完整代码：https://github.com/Indigo63/strapi-next
总结
通过使用 Headless CMS 和 Next.js，我们可以构建高速、可扩展和自定义化的 Web 应用程序。Headless CMS 专注于内容管理，Next.js 专注于前端的展示。这样能够让前端开发人员更加专注于优化内容本身。通过这两个工具的组合，将极大地提高我们的开发效率，也能创造出更好的的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c1fce968c7c53b0b2c404
