Mock.js

目前国内用的最多的 mock 数据生成方案，具体用法详见官方网站

mockjs会默认拦截ajax 请求，只要 mock 地址和请求地址一致即可

安装

npm install mockjs

目录结构

在 src目录下添加 mock 数据文件夹

文件夹中添加基于mockjs 数据模拟文件 userInfo.ts

import Mock from 'mockjs';

const Random = Mock.Random;
const userInfo = Mock.mock('/user/login', 'post', () => {
  const ret = Mock.mock({ username: '@cname', age: Random.integer(60, 100), ID: Random.id() });
  return {
    status: 200,
    data: ret,
  };
});

export { userInfo };

同时添加 index.ts文件，该文件是为了对应多个 mock 数据模拟文件提供统一导出入口

export { userInfo } from './userInfo';

env 文件添加 mock 控制开关

NEXT_PUBLIC_MOCK=true

添加MockComponent.tsx组件

本项目由于运用 APP router 和静态导出模式，无法使用middleware统一拦截 mockjs，所以需要添加该组件，并添加到 Layout 布局中

'use client';
import { useEffect } from 'react';

export default function MockComponent() {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      if (process.env.NEXT_PUBLIC_MOCK === 'true') {
        require('@/mock/index');
      }
    }
  }, []);

  return null;
};

layout 组件中添加

export default function EmptyLayout({ children, params: { locale } }: Props) {
  const messages = locale === 'en' ? en : zh;
  return (
    <NextIntlClientProvider locale={locale} messages={messages} timeZone={timeZone}>
      <AntdStyledComponentsRegistry>
        <MockComponent></MockComponent>
        {children}
      </AntdStyledComponentsRegistry>
    </NextIntlClientProvider>
  );
}

总结

这样一个完整的 nextjs14集成mockjs 方案已经完成，其实对于前端 mock 数据一直有争议，有的人认为必须有，有的人认为这个东西浪费时间还有代码侵入，其实我个人认为这个东西存在即合理，只要合理运用就好，个人经验是如果后端接口比较快和明确就没有必要用，但是如果前后端时间无法同步的话就需要使用，但是这个就必须和后端小伙伴约定好输入输出了，因为如果后端数据接口有修改的话，前端就会有一定额外的工作量的出现。

[Next.js 14] mock 数据解决方案

Mock.js

安装

目录结构

env 文件添加 mock 控制开关

添加MockComponent.tsx组件

总结