在现代 Web 开发中，前端框架和库已经成为了我们开发应用的标准工具。Next.js 是一款反应剂和 Node.js 的前端框架，它提供了服务器端渲染，模块热替换和静态导出等以改善 Web 应用的性能和维护性。在本篇文章中，我们将探索使用 Next.js 和 MongoDB 来构建全栈 Web 应用程序的详细指南。
准备工作
在使用 Next.js 和 MongoDB 开始之前，我们需要安装翻译依赖。我们将使用以下依赖： next，mongo，mongoose 和 dotenv。请打开终端并执行以下命令：
npm install next mongo mongoose dotenv
mongoose 是一种使用 MongoDB 的优秀工具，它为我们提供了一个简单的方式来连接到数据库。而 dotenv 是用于加载环境变量的模块，我们将使用它来加载 MongoDB 数据库的配置。
连接到 MongoDB
我们可以创建一个名为 db.js 的文件来连接到 MongoDB。在该文件中，我们将导入 mongoose，并使用 mongoose.connect 来连接到 MongoDB。我们将在 .env 文件中设置数据库的连接密钥和其他配置：
-- -------------------- ---- -------
----- -------- - --------------------
---------------------------
----- --- - ------------------------
-----------------
----
- ---------------- ----- ------------------- ---- --
----- -- -
-- ----- -----------------
---- ---------------------- -- ----------
-
--
-------------- - --------------------这里，我们使用 dotenv 来加载名为 MONGODB_URI 的环境变量，该变量包含连接 MongoDB 的链接密钥。我们使用 mongoose.connect 来连接到数据库，并使用回调函数打印出结果。
创建我们的 Model
在 MongoDB 中，Collection 表示存储数据的容器（类似于关系数据库中的表）。 MongoDB 将数据存储为文档，这些文档表示 JSON 对象。我们可以使用 Mongoose 架构来定义文档的结构和类型，以及与其相关的操作。
在下面的代码中，我们将定义一个名为 Product 的 Schema。该 Schema 包含 name，description，price 和 quantity 四个属性。每个属性都定义为特定的数据类型。我们将使用 mongoose.model 函数来创建一个名为 product 的 Model 类：
-- -------------------- ---- ------- ----- -------- - -------------------- ----- ------------- - --- ----------------- ----- - ----- ------- --------- ---- -- ------------ - ----- ------- --------- ---- -- ------ - ----- ------- --------- ---- -- --------- - ----- ------- --------- ---- -- --- -------------- - ------------------------- ---------------
在该模型中，我们使用 mongoose.model 导出名为 “Product” 的模型类。这个类将包含我们定义的属性和操作。
创建 API 路由
将 MongoDB 连接到 Next.js 应用程序后，我们可以开始为我们的应用程序创建 API 路由。在应用程序项目根目录中创建一个名为 api 的文件夹。我们将在其中创建一个名为 products.js 的文件。这个文件将包含我们的 API 路由，用于连接 MongoDB 并提供一些商店物品服务。
在下面的代码中，我们首先导入之前我们定义的 Product 模型。我们使用模型提供的方法从 MongoDB 中获取所有物品，并使用 Express 中间件函数将这些物品作为 JSON 响应返回给客户端。
-- -------------------- ---- ------- ----- ------- - -------------------------------- ------ --------- ---- ---------------------- ------------ ------ ------- ----- ----- ---- -- - ----- -------- - ----- ----------------- ------------------------------- --
添加 Swr
使用 Next.js 和 MongoDB 搭建 Web 应用程序时，使用 Swr 可以轻松地从客户端访问我们的 API 路由。Swr 是一种数据获取库，在 Next.js 应用程序中处理动态数据时很有用。它提供了一种缓存技术，可以减少应用程序的重复加载请求。
在下面的代码中，我们将导入 useSWR 自定义 React Hooks，并使用它来获取我们的 API 路由数据。我们还传递了 API 路由的 URL，以及我们希望在缓存中保留的时间。
-- -------------------- ---- -------
------ ------ ---- ------
-------- ---------- -
----- - ----- ----- - - ----------------------- -
---------------- -----
---
-- ------- ------ ----------- -- -----------
-- ------- ------ ----------------------
------ -
--
------------------- -- -
---- ------------------
-----------------------
----------------------------
---
--------------- - ------------------ ----
----
------
---
---
--
-
------ ------- ---------添加新的商品
在 Next.js 中使用 MongoDB 时，我们需要添加创建新产品的功能。 我们可以使用 POST 请求来添加新产品。 我们将需要创建一个新的 API 路由，它将创建新产品并将其保存到 MongoDB 中。
在我们的产品模型中，我们设置了一些属性为 required。 这样做可以验证从客户端发送的请求是否具有必需的属性。 下面是我们如何在服务器端创建新产品的代码：
-- -------------------- ---- -------
----- ------- - --------------------------------
------ --------- ---- ----------------------
------------
------ ------- ----- ----- ---- -- -
----- - ----- ------------ ------ -------- - - ---------
--- -
----- ------- - ----- --- ---------
-----
------------
------
---------
----------
---------------------- -------- ---------- ------- ---
- ----- ------- -
-------------------
---------------------- -------- ------ --- -------- ----- ---
-
--在代码中，我们首先导入 Product 模型，并使用 dbConnect 函数连接到 MongoDB。当收到 POST 请求时，我们从 req.body 中获取产品的所有属性，然后使用 Product 模型的 save() 方法创建产品。如果成功创建，则使用 res.status(201) 将其作为 JSON 响应发送给客户端。如果未成功创建，则返回错误响应。
结论
在本篇文章中，我们介绍了使用 Next.js 和 MongoDB 构建全栈 JavaScript 应用程序的流程。我们首先连接到 MongoDB 数据库，定义了一个简单的 Product 模型，然后使用 API 路由将其公开。我们还添加了 Swr，以便在客户端访问我们的 API 路由。最后，我们还介绍了如何在服务器端创建新产品并将其保存到数据库中。
希望这篇文章对你进行了深入的指导，并为你开始使用 Next.js 和 MongoDB 提供了有用的信息。这些技术都是现代 Web 开发必备的工具，掌握它们将帮助你提高应用程序的性能和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d5425a336082f254c3e98