Next.js：如何针对不同环境使用不同的env文件？

Question

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

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

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

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”

Answer 1

我假设您正在使用 React 和 nextjs。如果不是，请忽略此答案。我也在做同样的事情。 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",
...

Answer 2

对于开发环境，将文件命名为

.env.development

，对于生产环境，将文件命名为

.env.production

。

Next.js 有内置的环境变量加载器。所以不需要

dotenv

或类似的包。只需添加文件即可。它将自动加载（请参阅文档）。

Answer 3

在 next.config.js 中

const { resolve,join } = require('path');
const {config} = require('dotenv');
let path=resolve('../')
config({ path: join(path,'.env') })
let MAIN_URL=process.env.NEXT_PUBLIC_BASE_URL_MAIN
console.log("MAIN_URL",MAIN_URL)
const nextConfig = {
  reactStrictMode: true,
  env: {
    API_BASE_URL: MAIN_URL
  },
}

module.exports = nextConfig