本文将介绍如何在 Next.js 应用中实现留言板功能。留言板通常是网站或应用中用户互动和交流的重要方式之一，它可以让用户方便地留下评论、反馈和建议，进而提高用户参与度和满意度。
我们将通过以下步骤来实现一个基础的留言板功能：
- 创建一个 Next.js 应用
- 集成 MongoDB 数据库
- 创建一个留言板页面
- 实现留言功能
- 实现留言列表展示功能
1. 创建一个 Next.js 应用
首先，我们需要创建一个 Next.js 应用，如果已有现成的项目可以跳过这一步。
在命令行中执行以下命令来创建一个 Next.js 应用：
npx create-next-app my-app
该命令会使用默认模板创建一个名为 my-app 的 Next.js 应用。
2. 集成 MongoDB 数据库
接下来，我们需要集成 MongoDB 数据库来存储留言信息。
在本例中，我们将使用 MongoDB Atlas 托管服务来创建和管理数据库。首先需要注册并获取一个免费的 MongoDB Atlas 账户，并创建一个数据库集群。
然后，我们需要使用 MongoDB 数据库连接字符串来连接数据库。为此，我们可以使用 mongoose 库来简化连接过程。
在 Next.js 应用的根目录下安装 mongoose 库：
npm install mongoose
在 pages 目录下创建一个名为 api 的文件夹，用于存放与 API 相关的代码。在 api 文件夹下创建一个名为 db.js 的文件，该文件将用于连接到 MongoDB 数据库：
-- -------------------- ---- -------
------ -------- ---- -----------
----- --------- - -- -- -
----------------------------------------- -
------------------- -----
---------------- -----
---------- -- -------------------- ------------
---------- -- -------------------- ---------- ------ ------------------
--
------ ------- ----------该文件中的 process.env.MONGODB_URI 变量需要在 .env.local 文件中进行配置，该文件需要在应用启动前进行加载。在 .env.local 文件中添加以下内容：
MONGODB_URI=mongodb+srv://<username>:<password>@<clustername>.mongodb.net/<dbname>?retryWrites=true&w=majority
其中，<username>、<password>、<clustername> 和 <dbname> 分别代表 MongoDB Atlas 账户的用户名、密码、集群名称和数据库名称。要使用实际的值替换这些占位符。
在 Next.js 应用的 pages/_app.js 文件中添加下面代码，用于在应用启动时连接数据库：
-- -------------------- ---- ------- ------ --- ---- ----------- ------ --------- ---- ------------ ------------ -------- ------- ---------- --------- -- - ------ ---------- -------------- --- - ------ ------- ------
3. 创建一个留言板页面
接下来，我们需要创建一个页面来显示留言板和留言表单。
在 pages 目录下创建一个名为 guestbook.js 的文件，该文件将用于创建一个基础留言板页面。
-- -------------------- ---- -------
------ - -------- - ---- --------
-------- ----------- -
----- ------ -------- - -------------
----- --------- ----------- - -------------
----- ------------ - ----- ------- -- -
-----------------------
----- -------- - ----- ----------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ---------------- ----- ----- -------- ------- ---
---
-- ------------- -
------------
---------------
---------------
-
--
------ -
-----
----------------
----- ------------------------
-----
------ --------------------------
------
---------
-----------
--------
------------
----------------- -- ----------------------------
--
------
-----
------ -----------------------------
---------
------------
--------
---------------
----------------- -- -------------------------------
--
------
------- ---------------------------
-------
------
--
-
------ ------- ----------该页面中的 handleSubmit 函数将负责使用 API 来提交留言数据。该表单将使用 useState 钩子来管理组件的输入状态。
现在，我们可以通过访问 /guestbook 路径来访问留言板页面。为此，在 pages/index.js 中导入 Guestbook 组件：
-- -------------------- ---- -------
------ --------- ---- --------------
------ ------- -------- ------ -
------ -
-----
---------- --
------
--
-4. 实现留言功能
现在，我们需要创建一个 API 接口，用于处理留言数据的存储。
在 api 目录下创建一个名为 guestbook.js 的文件，该文件将用于处理留言数据的存储和检索。本文中，我们将使用 mongoose 来定义一个名为 Message 的 MongoDB 数据模型，并创建一个 POST 请求来将留言数据保存到数据库中。
-- -------------------- ---- -------
------ --------- ---- -------
------ -------- ---- -----------
----- ------------- - --- -----------------
----- -------
-------- -------
----------- - ----- ----- -------- -------- --
---
--- --------
--- -
------- - --------------------------
- ----- -
------- - ------------------------- ---------------
-
------------
------ ------- ----- ----- ---- -- -
-- ----------- --- ------- -
--- -
----- ------- - --- ------------------
----- ---------------
------------------
- ----- ------- -
---------------------
--------------------------- ------ ------- -- ------------
-
-
--该 API 接口中只处理 POST 请求。当请求发出时，它将使用 mongoose 创建一个新的 Message 数据模型实例，然后将其保存到 MongoDB 数据库中。
现在，我们完成了一个基本的留言板功能。
5. 实现留言列表展示功能
接下来，我们将展示如何从数据库中检索留言，以便在页面中显示留言列表。
在 api 目录下创建一个名为 messages.js 的文件，该文件将用于获取留言列表数据：
-- -------------------- ---- ------- ------ --------- ---- ------- ------ ------- ---- ------------------- ------------ ------ ------- ----- ----- ---- -- - ----- -------- - ----- --------------------- ---- -- ------------- ------------------- --
该 API 接口中通过对 Message 数据模型使用 find 方法从数据库中检索最近的 20 条留言，然后将其返回到客户端。
现在，我们可以在 guestbook.js 页面中使用 useEffect 钩子来获取留言列表，并在页面上显示所有留言。
修改 guestbook.js 文件添加 useEffect 钩子
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
------ ----------- ---- ----------------------------
-------- ----------- -
----- ------ -------- - -------------
----- --------- ----------- - -------------
----- ---------- ------------ - -------------
--------------- -- -- -
----- -------- - ----- -----------------------
----- ---- - ----- ----------------
------------------
-- ----
----- ------------ - ----- ------- -- -
-----------------------
----- -------- - ----- ----------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ---------------- ----- ----- -------- ------- ---
---
-- ------------- -
------------
---------------
---------------
-
--
------ -
-----
----------------
----- ------------------------
-----
------ --------------------------
------
---------
-----------
--------
------------
----------------- -- ----------------------------
--
------
-----
------ -----------------------------
---------
------------
--------
---------------
----------------- -- -------------------------------
--
------
------- ---------------------------
-------
------------ ------------------- --
------
--
-
------ ------- ----------现在，我们创建了一个名为 MessageList 组件用于对留言列表进行渲染。
在 components 目录下创建一个名为 MessageList.js 的组件，该组件将接收 messages 属性作为输入，并显示所有留言，如下所示：
-- -------------------- ---- -------
-------- ------------- -------- -- -
-- ---------------- --- -- -
------ --------------
-
------ -
-----
----------------------- -- -
---- ------------------
-----------------------
------------------------
--- --
------
---
------
--
-
------ ------- ------------MessageList 组件通过 map 方法遍历 messages 数组，并将每个留言作为 key。
现在，我们已经完成了 Next.js 中的留言板功能实现。
总结
本文介绍了如何使用 Next.js、MongoDB 数据库和 React 来实现一个基础的留言板功能。我们学习了如何创建 Next.js 应用、集成 MongoDB 数据库、实现留言板页面、实现留言功能和实现留言列表展示功能。希望本文对你学习 Next.js 以及后端开发有所助益。完整的代码放在：GitHub
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647e937248841e9894e459c1