Nextjs环境变量配置和Api的mock

1、next.config.js中的配置

publicRuntimeConfig: {
    env: {
      NEXT_PUBLIC_MODE: process.env['MODE'],
    },
  },

2、package.json中的配置,其中，scripts中的第二个参数就是我们需要同构需要传递的变量

"scripts": {
  "mock": "cross-env NODE_ENV=dev MODE=mock node --icu-data-dir=node_modules/full-icu server.js",
}

3、引用原文

API routes provide a solution to build your API with Next.js.
Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. They are server-side only bundles and won't increase your client-side bundle size.
意思很简单，在pages中建立api文件夹，比如pages/api/test.js，那么就能访问localhost:3000/api/test。
其中test.js文件如下：

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

4、最关键的一步，在需要调用接口的地方，一般是service文件中加载相应mock数据，示例如下

import request from '@/utils/request';
import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();
// 从环境变量中取MODE，配置在next.config.js和package.json文件中
const mode = publicRuntimeConfig.env.NEXT_PUBLIC_MODE;
// console.log('publicRuntimeConfig', publicRuntimeConfig);
// console.log('mode', mode);
export async function getTestData(key) {
 // 模拟的请求
  if (mode === 'mock') {
    return request(`/api/test`);
  }
  // 真实的链接请求
  return request(`/api/test/${key}`, {
    method: 'GET',
  });
}

写在最后

如有疑问，欢迎留言讨论。后会有期。