在前端开发中，我们经常需要使用数据来展示页面内容。在开发初期，可能由于后端接口未开发完毕，我们需要使用 Mock 数据来模拟接口返回数据，提高开发效率。Next.js 是一款基于 React 的服务器端渲染框架，本文将介绍 Next.js 中 Mock 数据的用法。
为什么需要使用 Mock 数据
在开发初期，后端接口可能还未开发完成，这时候，我们需要使用 Mock 数据来模拟接口返回数据，方便我们进行页面的开发和调试。此外，如果后端接口存在访问限制，比如需要登录才能访问，那么在开发过程中同样需要使用 Mock 数据进行测试和调试。
Next.js 中的 Mock 数据
Next.js 中可以使用多种方式来实现 Mock 数据。下面我们将介绍其中的两种方式。
使用 Mock.js
Mock.js 是一款前端数据模拟库，可以生成随机数据，模拟接口返回数据。在 Next.js 中使用 Mock.js，我们需要先安装 mockjs 库。
npm install mockjs --save-dev
然后可以在 pages 目录下新建一个 api 目录，用来存放我们的 API 接口。在该目录下新建一个 js 文件，比如我们可以新建一个 users.js 文件来模拟获取用户信息的接口。
-- -------------------- ---- -------
------ ---- ---- ---------
------ ------- ----- ---- -- -
----- ---- - -----------
---------- -
-
-------- --
----- ---------
------------ --
----------- ----- -----
------ --------------------
--
--
---
------ --------------------
--接下来，我们需要在页面中引入该接口，使用 fetch 或 axios 等工具来发送请求。比如在 pages 目录下新建一个 users.js 页面，来展示从 Mock 数据获取的用户信息。
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
------ ------- -------- ------- -
----- ---------- ------------ - -------------
------------ -- -
-------------------
----------- -- -----------
------------ -- -
------------------
---
-- ----
------ -
-----
-------------------- -- -
---- --------------
---------------------
--------------------
-----------------------
----------------------
------
---
------
--
-然后启动 Next.js 应用，访问 /users 页面即可看到从 Mock 数据获取到的用户信息。
使用 json-server
json-server 是一款快速构建 RESTful API 的工具，可以快速搭建一个虚拟的服务器，并且根据数据文件（JSON 格式）来生成对应的 RESTful API。在 Next.js 中使用 json-server，我们需要先全局安装 json-server。
npm install json-server -g
然后，在项目根目录下新建一个 mock 目录，用来存放我们的 Mock 数据文件。比如我们可以新建一个 db.json 文件，存放用户列表的数据。
-- -------------------- ---- -------
-
-------- -
-
----- --
------- -----
------ ---
--------- ----
-------- -------------
--
-
----- --
------- -----
------ ---
--------- ----
-------- -------------
-
-
-接下来，在项目根目录下新建一个 script.js 文件来启动 json-server。
-- -------------------- ---- ------- ----- ---------- - ----------------------- ----- ------ - -------------------- ----- ------ - ------------------------------------ ----- ----------- - --------------------- ------- ----------- ------- ----- --- ----- ---- - ---------------- -- ----- ------------------------ ------------------- ------------------- ----- -- - -- ----- ----- ---- -------------- ----- -- --------------------------- ---
然后在 package.json 中添加启动脚本。
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"mock": "node script.js"
}
}最后，启动 json-server 和 Next.js 应用。
npm run mock npm run dev
访问 http://localhost:3001/users 即可看到从 Mock 数据获取到的用户信息。
总结
在开发过程中，使用 Mock 数据可以提高开发效率，方便我们进行页面的开发和调试。Next.js 中可以使用 Mock.js 和 json-server 等多种方式来实现 Mock 数据。在使用 Mock 数据的过程中，需要注意数据的结构和格式，以便正确地调用接口数据展示页面内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476d060968c7c53b03720a9