前端开发是面向用户的重要部分，但与之同时，后端代码开发也是网站层面不可或缺的部分。为了降低后端代码的开发难度，许多头脑聪明的开发者们使用 Headless CMS 架构（即无头CMS）。在这篇文章中，我们将会介绍Headless CMS是什么，并演示如何使用 Next.js 与Headless CMS 打造无后端全栈应用。
什么是 Headless CMS？
Headless CMS 是一个不提供模板或渲染引擎的 CMS，它只提供 API 接口和数据存储功能。开发人员可以使用这些 API 接口通过 RESTful API 或者 GraphQL 来获取存储的数据。开发人员可以将API连接到任何前端技术栈中去，例如使用 React 或者 Vue.js 等等。在这种情况下，Headless CMS 扮演着数据中心的角色。
为什么使用 Headless CMS？
现代前端开发变得越来越复杂，复杂的后台逻辑和数据库操作更是让人感到困难。使用 Headless CMS 可以降低开发者的前后端沟通难度，避免了常见的代码冲突，同时也可以让开发者专注于前端设计方面的开发，提高开发效率。
Next.js
Next.js 是一个流行的 React 服务端渲染框架，用于建设高性能、SEO友好和可扩展的应用程序。Next.js 提供了快速编码、热加载和自动代码拆分之类的众多特性。
Headless CMS
Strapi 是一款优秀的Headless CMS软件，提供了丰富的功能来管理内容类型，数据表，自定义字段，并针对Typescript 集成了GraphQL 和 Restful API。
打造无后端全栈应用
- 安装 Strapi 并创建一个 blog API
首先，我们需要安装 Strapi 并创建一个 blog API。执行以下命令即可：
npx create-strapi-app my-blog-api --quickstart
这会创建一个名为 my-blog-api 的 Strapi 应用程序。我们需要配置一些 API 来存储和获取博客文章：
- 创建一个新的内容类型
article，包含title、description、body、author和published字段。 - 添加数据，创建几篇博客文章。
- 创建一个 Next.js 应用程序来获取 Strapi API 中的数据
接下来，我们需要创建一个 Next.js 应用程序，该应用程序将使用 Strapi 的 REST API 来获取数据。在控制台运行以下命令：
yarn create next-app my-blog
这会创建一个名为 my-blog 的 Next.js 应用程序，其中包含了默认的页面和样式。我们将创建一个新的页面来显示博客文章，以及单个文章页面来显示单个博客文章。
- 安装必要的依赖
现在，我们需要在我们的 Next.js 应用程序中安装一些必要的依赖。这些依赖包括：
- isomorphic-unfetch：用于在客户端和服务器端获取数据。
- react-markdown：用于将 Markdown 语法转换为 HTML。
执行以下命令以安装这些依赖：
yarn add isomorphic-unfetch react-markdown
- 创建博客文章列表页面
我们需要创建一个页面来显示博客文章的列表。在 /pages 目录中创建一个名为 index.js 的文件，然后添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ---------------------
------ -------- ---- -----------------
----- ----- - -- -------- -- -- -
-----
------ ---------
----------------------- -- -
---- -----------------
------------------------
----------------------------
--------- --------------------- --
------
---
------
--
--------------------- - ----- -- -- -
----- --- - ----- ----------------------------------------
----- -------- - ----- -----------
------ - -------- --
--
------ ------- ------这里的 Index 组件获取所有博客文章并将它们呈现为列表。
- 创建单个博客文章页面
接下来，我们需要创建一个页面来显示单个博客文章。在 /pages 目录中创建一个名为 [slug].js 的文件，然后添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ---------------------
------ -------- ---- -----------------
----- ------- - -- ------- -- -- -
-----
------------------------
----------------------------
--------- --------------------- --
------
--
----------------------- - ----- -- ----- -- -- -
----- --- - ----- -----------------------------------------------------------
----- ---- - ----- -----------
----- ------- - --------
------ - ------- --
--
------ ------- --------这个页面从 Strapi 中获取博客文章，并呈现为单独的页面。
- 运行 Next.js 和 Strapi
现在，我们已经创建了一个完全的、无后端全栈应用程序！我们可以使用以下命令运行 Next.js 和 Strapi：
cd my-blog-api yarn develop cd ../my-blog yarn dev
打开 http://localhost:3000 即可访问我们的博客网站。
总结
在本文中，我们已经演示了如何使用 Next.js 和 Strapi 构建无后端全栈应用程序。Headless CMS的好处不仅是它可以让你专注于你的前端设计开发，同时它也可以帮助你更好的组织你的数据和内容。使用 Next.js 作为前端框架，无需考虑服务器架构，仅需要关心数据与UI的连接，使我们的开发更加高效。
示例代码可在我的GitHub 中查看：https://github.com/Jane1234567890/nextjs_headlessCMS
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/665465d9d3423812e48fea26