手把手教学 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;