官网只有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;