Next.js 是一个 React 框架，它的服务器渲染（SSR）与静态生成能力使得创建高性能的现代 Web 应用程序变得更加容易。那么，在 Next.js 中，如何实现 Mongodb 的连接和使用呢？
简介
MongoDB 是一个开源文档数据库，采用面向文档的存储模型，可以轻松存储大量不同类型和结构的数据。在 Next.js 中，我们可以通过 MongoDB 驱动程序 mongodb 或官方 Mongodb 集成包 @next/mongodb 来进行数据库集成。
步骤
1.安装依赖
使用以下命令，安装需要的软件包：
npm i mongodb @next/mongodb bcrypt
这里我们不仅需要 MongoDB 驱动程序 mongodb 和官方 MongoDB 集成包 @next/mongodb，还需要密码哈希库 bcrypt。
2.配置 .env.local
我们需要在项目根目录中创建 .env.local 文件。在其中添加以下环境变量：
MONGODB_URI=mongodb+srv://<username>:<password>@<cluster-url>/test?retryWrites=true&w=majority MONGODB_DB=my-db
这里，MONGODB_URI 是我们的 MongoDB URL，包括用户名、密码、集群 URL 等信息。MONGODB_DB 是我们要使用的数据库名称。
3.创建 Mongodb 组件
我们可以在 lib 目录下创建一个 mongodb.js 文件，用于连接 Mongodb 数据库。
-- -------------------- ---- -------
------ - ----------- - ---- ----------
----- --- - ------------------------
--- -------
--- --------------
-- -------------------------- -
----- --- ------------- --- ---- ----- --- -- -------------
-
-- --------------------- --- -------------- -
----------------------- - --------------------------------
------------------------
-----------------
--
-
-- ---------------- -
------------- - ------------------------ -
---------------- -----
------------------- -----
---
-
------ ------- ----- -------- ------------------- -
------ - ----- --------------
------ - ------- --- --------------------------------- --
-在上面的代码中，我们从 .env.local 中获取 MongoDB URI，然后使用 MongoClient.connect() 连接到数据库。同时，我们使用 useNewUrlParser 选项来解析 URI，使用 useUnifiedTopology 选项启用监视器的新引擎。最后，我们需要导出一个用于连接到数据库的 connectToDatabase 函数。
4.创建 API 路由
在 pages/api 目录下创建一个名为 findUser.js 的文件，用于查询数据库中的用户。
-- -------------------- ---- ------- ------ ----------------- ---- -------------------- ------ ------- ----- -------- ------------ ---- - ----- - ----- - - --------- ----- - -- - - ----- -------------------- ----- ----- - ----- -------------------------------- ----- --- ---------------------- ----- --- -
这里我们先导入 connectToDatabase 函数，然后使用 await 关键字连接到数据库。我们使用 findOne() 查询用户，传入一个包含用户邮箱的查询对象。最后，我们返回查询结果。
5.执行查询
在 pages/index.js 中，我们可以使用 fetch() 方法来执行查询。
-- -------------------- ---- -------
------ - -------- - ---- --------
------ ------- -------- ------ -
----- ------- --------- - -------------
----- ------- --------- - -------------
----- ------------ - ----- -- -- -
----- -------- - ----- ---------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
------
---
---
----- ---- - ----- ----------------
---------------------
--
------ -
-----
------ ------------ ------------- -- ------------------------- --
------- --------------------------------------
------ -- --------------------------- ----- ----------
------
--
-在上面的代码中，我们首先导入 useState 钩子和使用它们的状态：用户邮箱和用户列表。然后，在 handleSearch 函数中，我们使用 fetch() 方法来执行查询。我们将用户邮箱作为请求的主体，并将其转换为 JSON 格式。
在成功执行查询后，我们从响应中提取查询结果，并使用 setUsers() 函数更新用户状态。最后，我们将用户状态作为预格式化文本渲染出来。
结论
在本文中，我们介绍了如何在 Next.js 中使用 Mongodb。我们使用 MongoDB 驱动程序 mongodb 或官方 Mongodb 集成包 @next/mongodb 来进行集成，创建了一个 ConnectToDatabase 函数，用于连接 Mongodb 数据库。我们还创建了一个 API 路由 findUser.js，查询了 MongoDB 数据库中的用户。我们使用了 useState 钩子和 fetch() 方法来执行查询，并使用预格式化文本将查询结果渲染到页面上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fcb340447136260171d3b6