在前端开发中，CMS(Content Management System)是非常有用的一种工具，它可以让非技术人员轻松管理网站内容。使用Next.js可以快速构建可扩展的CMS站点，同时也为开发人员提供了丰富的工具和插件，使开发过程更加简单。
本文将探讨如何使用Next.js构建CMS的最佳实践。
CMS 的架构
在开始构建CMS之前，我们必须了解它的架构。一个典型的CMS包含三个基本组件：数据库、用户界面和API。
数据库是存储网站内容和设置的地方，它可以是任何关系数据库或NoSQL数据库。用户界面是非技术人员可以使用的页面，它允许他们创建、编辑和删除内容。API是用于连接数据库和用户界面的中间件，它在数据层和用户层间进行数据传输和处理。
在构建CMS时，我们需要为每个组件选择一个合适的库或框架。
在这里，我们建议使用以下技术栈：
- 数据库：MongoDB
- 用户界面：React + Material-UI
- API：Next.js
项目结构
让我们开始构建我们的CMS。首先，我们需要一个基本的项目结构：
-- -------------------- ---- ------- - --- ------------- --- ------ - --- ---- - - --- ----------- - --- ------ - - --- ------------- - - --- --------- - - --- --------- - - --- ------------ - --- --------- - --- --------- - --- ------- --- ----------- - --- ------- - - --- ---------- - - --- ----------- - - --- ---------- - --- ------ - - --- ------------ - - --- ------------ - - --- ---------------- - --- --- - --- ---------- - --- -------- - --- ---------- - --- -------- --- ------------
在这个结构中， pages 目录用于存放每个页面的代码文件。在 pages/api 下，我们存放用于连接MongoDB的API代码。在 pages/admin 下，我们存放后台使用的页面。pages/index.js 和 pages/login.js 是我们网站的主页面和登录页面。pages/404.js 是我们网站的404页面。在 components 目录下，我们存放用于构建页面的可重用组件。
API 设计
我们将使用MongoDB作为我们的数据库，所以让我们在 pages/api 目录下创建一个 content.js 文件来连接它。
-- -------------------- ---- -------
------ - ----------- - ---- ----------
------ ----- -------- ----------- -
----- ------ - ----- ------------------------------------------ -
---------------- -----
------------------- -----
---
------ -------------------------------
-
------ ------- ----- -------- ------------ ---- -
----- -- - ----- ------------
------ ------------ -
---- ------ -
----- ----- - ----- ----------------------------------------
----- ----- - ----- ----------------------------------------
----- -------- - ----- ------------------------------------
----------------------
------
------
---------
---
------
-
---- ------- -
----- - ---- - - ---------
-- ----- --- ------- -
----- - ------ ------- - - ---------
----- ---------------------------------- ------ ------- ---
---------------------- -------- ----- -------- ---
-
-- ----- --- ------- -
----- - ------ ------- - - ---------
----- ---------------------------------- ------ ------- ---
---------------------- -------- ----- -------- ---
-
-- ----- --- ----------- -
----- - --------- ----------- - - ---------
----- ---------------------------------------------- - ----- - --------- ----------- - ---
---------------------- -------- --------- -------- ---
-
------
-
-------- -
---------------------- -------- ---- ------ ---
-
-
-在 content.js 中，我们导出一个 connectDB() 函数，它用于连接我们的MongoDB。content() 函数用于处理API请求。在GET请求中，我们使用find()方法查找所有页面和帖子，并从数据库中查找设置。在POST请求中，我们可以创建新页面、新文章或更新设置。
后台界面
现在，我们可以构建后台界面。我们将使用React和Material-UI来处理我们的UI组件。
在 pages/admin 目录下，我们将创建以下页面：dashboard.js、pages.js、posts.js和settings.js。
dashboard.js：
-- -------------------- ---- -------
------ ---- ---- ------------
------ - ----- ------------ ----- ---------- - ---- --------------------
-------- ----------- -
------ -
--
------
---------------- - -----------
-------
----- --------- ------------
----- ---- ------- -------
------
-------------
----------- ------------ ---------------
-----
-------------
----------- ------------ --------------
--
-------------
--------------
-------
-------
----- ---- ------- -------
------
-------------
----------- ------------ ---------------
-----
-------------
----------- ------------ --------------
--
-------------
--------------
-------
-------
----- ---- ------- -------
------
-------------
----------- ------------ ---------------
--------
-------------
----------- ------------ --------------
-
-------------
--------------
-------
-------
-------
---
--
-
------ ------- ----------在 dashboard.js 中，我们使用了 Grid 和 Card 组件来构建一个简单的仪表盘。它显示了我们当前的页面、帖子和设置总数。
pages.js：
-- -------------------- ---- -------
------ ---- ---- ------------
------ - ----- ------- ------- ------------ -------------- ------------------ ------------- - ---- --------------------
------ - -------- - ---- --------
------ -------- ---- ----------------------------------
-------- ------- -
----- -------------- ---------------- - ----------------
-------- ------------------ -
----------------------
-
-------- --------------------- -
-----------------------
-
------ -
--
------
------------ - -----------
-------
----- --------- ------------
----- ---- --------
------- ------------------- --------------- ---------------------------
--- ----
---------
-------
-------
------- ------------------- ------------------------------
------------------- --- ------------------
---------------
------------------------- ----- --- ---- ----------------------------
--------- ----------------------------- --
----------------
---------------
------- ---------------------------------------------
----------------
---------
---
--
-
------ ------- ------在 pages.js 中，我们显示一个 New Page 按钮，当用户点击它时，我们将显示一个 PageForm 对话框来创建新页面。我们还使用 useState 钩子来打开和关闭对话框。
posts.js 和 settings.js 页面的结构与 pages.js 相似。
页面和帖子表格
让我们在 pages.js 和 posts.js 页面中使用表格展示页面和帖子。
-- -------------------- ---- -------
------ ---- ---- ------------
------ - ----- ------- --------------- ------ ---------- --------- ---------- --------- - ---- --------------------
------ - --------- --------- - ---- --------
------ --- ---- ----------------
-------- ------- -
----- ------- --------- - -------------
------------ -- -
------------------------------ -- -
-------------------------
---
-- ----
------ -
--
------
------------ - -----------
-------
----- --------- ------------
----- ---- --------
------- ------------------- --------------- ---------------------------
--- ----
---------
-------
----- ---- --------
----------------
-------
-----------
----------
-------------------------
----------------------------
------------------------------
------------------------------
-----------
------------
-----------
----------------- -- -
--------- ---------------
---------------------------------
-----------------------------------
-------------------------------------
-----------
------- ------------------- ----------------- ----------- -- ------------------------
------
---------
------------
-----------
---
------------
--------
-----------------
-------
-------
---
--
-
------ ------- ------在 pages.js 中，我们使用 useEffect 钩子获取页面列表，并在表格中显示每个页面的ID、标题和内容。我们还为每个页面添加了一个删除按钮。
在 posts.js 页面中，我们将重复以上操作，使用表格展示每个帖子。
表单
在CMS中可以创建、编辑和删除页面和帖子。让我们使用React和Material-UI来创建这些表单。
PageForm.js：
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - ---------- -------------- -------------- ------- ---------------- - ---- --------------------
------ --- ---- ----------------
-------- ---------- ------- -- -
----- ------- --------- - -------------
----- --------- ----------- - -------------
----- --------- ----------- - ----------------
-------- -------------------- -
-------------------------
-
-------- ---------------------- -
---------------------------
-
----- -------- --------------- -
-------------------
-----------------
--- -
----- -------------------- - ----- ------- ------ ------- ---
----------
- ----- ------- -
---------------------
- ------- -
------------------
-
-
------ -
----- ------------------------
---------------
---------- --------- --------- ------------- ------------- ---------------------------- --
---------- --------- --------------- --------- -------- --------------- ------------------------------ --
----------------
---------------
------- ------------------ ------------------
------
---------
------- ------------------ ------------- ----------------
-------- - ----------------- --------- -- - ---------
---------
----------------
-------
--
-
------ ------- ---------在 PageForm.js 中，我们使用 useState 钩子来管理表单数据。我们使用 TextField 组件来获取用户输入。我们使用 CircularProgress 组件来显示加载动画。
PostForm.js 与 PageForm.js 相似
SettingsForm.js：
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - ---------- ------------ ----------- ------- --------- -------------- -------------- ------- ---------------- - ---- --------------------
------ --- ---- ----------------
-------- -------------- -------- -------- -- -
----- ---------- ------------ - ----------------------------
----- ------------- --------------- - -------------------------------
----- --------- ----------- - ----------------
-------- ----------------------- -
----------------------------
-
-------- -------------------------- -
-------------------------------
-
----- -------- --------------- -
-------------------
-----------------
--- -
----- -------------------- - ----- ----------- --------- ----------- ---
----------
- ----- ------- -
---------------------
- ------- -
------------------
-
-
------ -
----- ------------------------
---------------
---------- --------- --------- ----------- ----- ---------------- ------------------------------- --
---------- --------- ------------------- --------- -------- ------------------- ---------------------------------- --
----------------
---------------
------- ------------------ ------------------
------
---------
------- ------------------ ------------- ----------------
-------- - ----------------- --------- -- - ---------
---------
----------------
-------
--
-
------ ------- -------------在 SettingsForm.js 中，我们使用 useState 钩子来管理设置数据。我们使用 TextField 和 Select 组件来获取用户输入。
总结
使用Next.js构建CMS是一种强大而快速的方式，它提供了一整套现成的工具和插件。我们可以使用MongoDB作为我们的数据库，并使用React和Material-UI来创建我们的用户界面。我们还介绍了如何处理表格和表单。
通过使用Next.js实现CMS，我们可以提供一种用户友好的方法，让非技术人员可以轻松地管理网站内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496789148841e98943a44a7