如何在 Next.js 应用程序中拥有不同的 env 文件？答案

【问题标题】：How to have different env files in Next.js app?如何在 Next.js 应用程序中拥有不同的 env 文件？
【发布时间】：2021-10-25 12:49:29
【问题描述】：

我想在更改环境时动态切换外部后端 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。

【问题讨论】：

标签： reactjs axios environment-variables next.js

【解决方案1】：

根据我对问题的大致理解，仅分享我的意见。

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

【讨论】：