随着互联网的不断发展，网站和应用程序的开发已经不只是简单的静态页面展示，而是需要更加灵活和动态的数据服务。因此，Headless CMS 已经成为前端行业中一种很重要的解决方案。
本文将介绍如何使用 Strapi 和 Next.js 构建一个 Serverless Headless CMS。这个方案可以让开发人员快速地搭建一个带有数据管理、权限控制和数据导出功能的 Web 应用程序。
什么是 Serverless Headless CMS？
首先，我们来了解一下 Headless CMS 是什么。Headless CMS 是一种把内容和展示分离的解决方案，它不提供网站的前端页面，仅仅提供数据服务接口。这样的好处是可以让前端开发人员专注于网站的展示和用户体验，而不用关心数据管理和后端开发。
而 Serverless 的概念则是指应用程序在运行时不需要进行服务器管理，而是由云平台提供的服务来管理。这样可以大幅降低维护成本，使开发人员只需要关注业务逻辑的实现。
因此，Serverless Headless CMS 就是以 Headless CMS 为基础，借助云平台提供的 Serverless 服务来实现数据管理和数据服务的解决方案。
Strapi：你的 Serverless Headless CMS
Strapi 是一个开源的 Headless CMS 平台，它提供了快速创建数据模型、数据管理、权限控制和前后端数据服务接口等一系列功能。这使得开发人员可以非常容易地搭建一个属于自己的 Serverless Headless CMS。
Strapi 可以通过自己的 API 来管理数据。其 API 可以用于全球各地的应用程序，包括 NoSQL 数据库的访问。此外，Strapi 还支持 GraphQL 查询语言，可以让您轻松地查询数据。因此，Strapi 是一个十分便捷且灵活的数据管理工具。
Next.js：您的应用程序框架
Next.js 是一个流行的 React 应用程序框架，它可以使您快速地搭建 Web 应用程序，还可以让您的应用程序更易于维护和开发。
Next.js 允许开发人员使用 React 等最新的 Web 技术，使用服务器渲染、代码分割和客户端路由等技术来构建高性能的 Web 应用程序。
通过与 Strapi 的结合，您可以构建一个完全由云服务管理的 Serverless Headless CMS 和应用程序。在下面的步骤中，我们将为您演示如何启动并配置 Strapi 和 Next.js。
启动 Strapi Server
Strapi 的启动非常简单，您无需安装、配置数据库或修改其他设置。您只需要从 Strapi 的官方网站 https://strapi.io/documentation/v3.x/getting-started/quick-start.html 获取安装命令，然后打开终端执行即可。
# 创建一个 Strapi 项目 npx create-strapi-app my-project --quickstart # 进入 Strapi 项目目录 cd my-project # 启动 Strapi 服务器 npm run develop
当 Strapi 服务器启动时，您将看到一个链接 http://localhost:1337/admin，用于访问管理后台页面。您可以使用默认的管理员账户登录(用户名：admin，密码：admin)。
创建数据模型
在管理后台页面创建一个 Collection Type，下面我们以创建一个带有 title 和 description 字段的 articles 数据为例。如图所示：
通过创建 Collection Type，您可以轻松地创建一些数据库表并定义表字段。Strapi 还支持多重关系。这使得它非常适合搭建大型应用程序，并且允许数据查询路径更加灵活。
配置和启动 Next.js 服务器
然后，我们来启动 Next.js 服务器。在终端运行以下命令创建 Next.js 应用程序：
# 创建 Next.js 应用程序 npx create-next-app my-app
当 Next.js 应用程序创建完毕之后，我们需要安装一些必要的组件：
cd my-app # 使用 `npm` 安装 `axios` 和 `react-markdown` npm install axios react-markdown
在下面的代码中，我们将在页面上获取 Strapi 的数据，并将其渲染为列表。然后我们在 pages/index.js 创建一个实现渲染文章列表的组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------
------ ------------- ---- -----------------
----- ---- - ------- -- -
----- - -------- - - ------
------ -
-----
-------------
----------------------- -- -
---- -----------------
------------------------
-------------- ---------------------------- --
------
---
------
--
--
-------------------- - ----- -- -- -
----- -------- - ----- --------------------------------------------
------ - --------- ------------- --
--
------ ------- -----当您在另一个终端浏览器窗口中启动 Next.js 服务器时，您将看到一个链接 http://localhost:3000/。页面将呈现一个文章列表，该列表是 Strapi 的 articles 数据。
# 启动 Next.js 服务器 npm run dev
创建自定义 API
Strapi 允许您轻松自定义 API。在这个例子中，我们将创建自定义 API 并公开数据获取接口。首先，在 Strapi 的管理界面中创建 Custom API，并定义它可以响应的路由。如图所示：
-- -------------------- ---- -------
-- -- ------ --- -------
-
-------- ------- --- --------
------- ---------
------------- -
---------- -
------- --------
-------- -
------- ---------
------------- -
-------- -
------- --------
--
-------------- -
------- --------
-
--
----------- -----------------------
-
-
--
----------- -----------
-然后创建以下自定义 API，用于使用 Strapi 的数据生成您自己的 JSON 数据：
-- -------------------- ---- -------
-- ------- ----------------- ---
-------------- - ----- ----- -- -
----- -------- - ----- -------------------------------
------ -
-------- ---------------------- -- --
------ --------------
------------ --------------------
----
--
--最后，在 Next.js 这边，我们可以公开访问自定义 API 的数据。如下所示：
-- -------------------- ---- -------
-- ---------------------
------ ----- ---- --------
------ ------- ----- ----- ---- -- -
----- - ---- - - ----- ----------
------------------------------------------
- -------- - --------------- ------------------ - -
--
------ -----------------------------------
--现在，您可以使用浏览器访问自定义 API 路径 http://localhost:3000/api/articles。
您可以通过 Strapi 平台轻松地管理数据，同时使用 Next.js 从 API 中获取数据。这样的 Serverless Headless CMS 构建解决方案，会使您的前端应用程序开发工作更加轻松、高效。
总结
本文介绍了如何使用 Strapi 和 Next.js 构建 Serverless Headless CMS 的解决方案。通过这个方案，您可以轻松搭建一个集数据管理、数据服务、权限控制于一体的 Web 应用程序。这也为前端开发人员的日常工作带来了极大的便利。
经过我们的介绍，您可详细了解如何启动和配置 Strapi 和 Next.js，并且了解了如何创建数据表和自定义 API，从而构建自己的 Serverless Headless CMS 解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646db158968c7c53b0c54ba3