Next.js：如何为不同的环境使用不同的 env 文件？答案

【问题标题】：Next.js: how to use different env file for different environment?Next.js：如何为不同的环境使用不同的 env 文件？
【发布时间】：2021-01-14 09:44:11
【问题描述】：

下面是 package.json 文件中的代码

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
},

下面是我的 next.config.js 文件，这里的 console.log 总是 undefined

require("dotenv").config();
console.log(process.env.BASE_URL)
module.exports = {
  env: {
    API_BASE_URL: process.env.BASE_URL
  },
  reactStrictMode: true,
}

这是在 .env.development 中

BASE_URL: 'http://localhost:3000'

当我运行 npm run dev 命令时，它打印在终端“Loaded env from /var/www/html/next/next-SC/.env.development”

那么，为什么控制台总是打印 undefined。

我正在使用下一个 js 版本“10.0.4”

【问题讨论】：

因为文件 nextjs 配置会在加载 env 文件之前加载。
不应该将.env.development 中的环境变量设置为BASE_URL=http://localhost:3000？
在我的 Ubuntu 服务器中，我只是在本地和服务器中设置了不同的环境变量。它们是自动获取的。只需要记住，如果要将环境变量公开，则必须添加前缀 NEXT_PUBLIC

标签： environment-variables next.js development-environment production-environment

【解决方案1】：

我假设你正在使用带有 nextjs 的 React。如果不是，那么请忽略这个答案。我也在做同样的事情。 React 内置了对环境变量的支持。您需要做的就是在您的环境变量前面加上 REACT_APP 前缀。因此，在您的 .env.development 或 .env.staging 等中，您可以拥有 REACT_APP_BASE_URL=https://blah.com。然后，您可以使用 process.env.REACT_APP_BASE_URL 在您的应用程序中访问它们。然后根据环境进行构建，我有（我使用的是craco，你只需使用正常的构建命令）

"build:nightly": "env-cmd -f .env.nightly craco build",
"build:nightly": "env-cmd -f .env.staging craco build",
"build:nightly": "env-cmd -f .env.beta craco build",
...

【讨论】：

【解决方案2】：

对于开发环境，将文件命名为.env.development，对于生产环境，命名为.env.production。

Next.js 有内置的环境变量加载器。所以不需要dotenv 或类似的包。只需添加文件。它将自动加载（参见documentation）。

【讨论】：