如何在Next.js应用程序中有不同的环境文件?

Question

我想在改变环境时动态切换外部后端API的基础url。例如:.env.local=local.com, .env.staging=staging.com, .env.production=production.com

为此，我使用axios进行API调用，并且我使用axios的实例，其中baseURL依赖于项目的当前环境。例如

const axiosInstance = axios.create({
baseURL: process.env.BASE_URL,
headers: {
"Content-Type": "application/json",
},
});

和我的脚本在package.json如下:

"scripts": {
"dev": "next dev",
"dev:staging": "env-cmd -f .env.staging next dev",
"dev:production": "env-cmd -f .env.production next dev",
"build": "next build",
"build:staging": "env-cmd -f .env.staging next build",
"build:production": "env-cmd -f .env.production next build",
"start": "next start",
"start:staging": "env-cmd -f .env.staging next start",
"start:production": "env-cmd -f .env.production next start"
},

但它总是加载。env.development和axiosInstance没有得到baseUrl.

Answer 1

基于我对这个问题的大致理解，只是分享一下我的看法。

• Next js根据环境自动获取环境变量。因此,您添加的其他类型的脚本可能不需要
• 在本地，下一个js将总是从.env.local文件加载-参考文档。如果需要测试登台/生产设置，请替换.env.local
中的值
• 最好不要将环境文件提交到github，因此在项目设置下的vercel中的Environment variables部分中，我们可以添加所需的环境变量