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

问题描述

下面是 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 命令时， 它在终端上打印“从/var/www/html/next/next-SC/.env.development加载的环境”

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

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

解决方法

我假设您正在使用 React 和 nextjs。如果没有，那么请忽略此答案。我也在做同样的事情。 React 内置了对 env vars 的支持。您需要做的就是在您的环境变量前添加 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",...