手把手教学 nextjs中环境变量的详细处理

官网只有dev和prod的环境变量判断，再次增加test环境变量和开发环境中调用线上接口的方法，然后再服务端和客户端都可以获取到环境变量了。

1.创建.env文件

首先在根目录下创建3个.env文件

// .env.development
APP_ENV=development

// .env.test
APP_ENV=test

// .env.production
APP_ENV=production

2.配置next.config.js

module.exports = {
  reactStrictMode: true,
  // 环境变量
  env: {
    APP_ENV: process.env.APP_ENV
  }
}

3.配置package.json

"scripts": {
    "dev": "APP_ENV=development next dev",
    // 开发环境中调用线上接口
    "dev:prod": "APP_ENV=production next dev",
    // 打测试包
    "build:test": "APP_ENV=test next build",
    "build:prod": "APP_ENV=production next build",
    "start": "next start",
    "lint": "next lint"
  },

4.使用

// 根据环境变量修改host
const prodHost = 'https://api.prod.com';
const testHost = 'https://api.test.com';

// 全局可获取process.env.APP_ENV
let appEnv = process.env.APP_ENV;
let host = appEnv=='production'? prodHost : testHost;