Next 9.4 内置了对 .env 文件的支持：https ://nextjs.org/docs/basic-features/environment-variables

但是，如果您想拥有多个 .env 文件，例如：

• .env.development
• .env.staging
• .env.presaging
• .env.生产

使用内置的 env 变量支持是不可能的。目前官方支持的环境只有 3 种，分别是：“开发”、“测试”、“生产”。随next dev你使用“开发”，next build && next start使用“生产”环境。

如果您需要为生产环境构建，但例如使用“.env.staging”，那么您需要添加env-cmd包，并将此行添加到您的 package.json 中：

"build:staging": "env-cmd -f .env.staging yarn build && yarn start"

接下来将使用“.env.staging”变量进行生产构建。

大多数这些答案的问题在于它们违背了“一次构建随处运行”的原则，实际上我们大多数人都在使用这种技术来构建和运行 Docker 容器。不可能有多个这样的构建命令，这将是不好的做法。

最好让您的环境在运行时可用。我们创建了一个允许下一次静态优化的包，并且仍然有运行时环境变量window.__ENV

https://github.com/andrewmclagan/react-env

这是通过在运行时从列入白名单的 env vars 生成环境配置对象来实现的：

{
  ...
  "scripts": {
    "dev": "react-env -- next dev", // where .env.${APP_ENV}
    "start": "react-env --env APP_ENV -- next start" // where .env.${APP_ENV}
  }
  ...
}

您可以通过以下两种方式在 nextjs 中拥有不同的 .env 文件：

1. 使用 env-cmd 包

在脚本中提供环境文件的路径，例如：

"scripts": {
    "start": "env-cmd path/to/prod/env/file next start",
    "start:dev": "env-cmd path/to/prod/env/file next dev",   
    "build:dev": "env-cmd path/to/dev/env/file next build",
    "build:test": "env-cmd path/to/test/env/file next build",
    "build:stage": "env-cmd path/to/stage/env/file next build",
    "build": "env-cmd path/to/stage/prod/file next build",        
},

2. 使用 dotenv 包

在 next.config.js 文件中添加以下内容：

require("dotenv").config({ path: `${process.env.ENVIRONMENT}` });

module.exports = {
      // your configs
}

并在您的脚本中，提供 ENVIRONMENT 变量，例如：

"scripts": {
    "start": "ENVIRONMENT=path/to/prod/env/file next start",
    "start:dev": "ENVIRONMENT=path/to/dev/env/file next dev",
    "build:dev": "ENVIRONMENT=path/to/dev/env/file next build",
    "build:test": "ENVIRONMENT=path/to/test/env/file next build",
    "build:stage": "ENVIRONMENT=path/to/stage/env/file next build",
    "build": "ENVIRONMENT=path/to/stage/prod/file next build",        
},

注意：不要将您的 .env* 文件放在根文件夹中，否则 NEXT 将自动从您的 .evn* 文件中选择并且它仅支持生产和开发阶段。所以它会忽略其他 .env.my-stage 文件。

Next 9.4 支持开箱即用的环境变量并包含对多种环境的支持。

新环境变量支持

• 默认情况下，环境变量仅在 Node.js 环境中可用
• 前缀为 的环境变量NEXT_PUBLIC_暴露给浏览器

暴露环境变量

Next.js 允许您使用环境变量文件公开变量(.env)，包括对多种环境的支持。它是这样工作的：

• .env - 包含所有环境的环境变量
• .env.local - 所有环境的局部变量覆盖
• .env.[environment]- 一种环境的环境变量。例如：.env.development
• .env.[environment].local- 一种环境的局部变量覆盖。例如：.env.development.local

npm i dotenv

然后将以下代码添加到next.config.js，重新启动应用程序，您就可以开始了！

// next.config.js

require('dotenv').config()
const webpack = require('webpack')

module.exports = {
  webpack: (config) => {
    config.plugins.push(
      new webpack.EnvironmentPlugin(process.env)
    )
    return config
  }
}

如果您的 .env 文件与next.config.js将路径添加到您的配置不在同一文件夹中，如下所示，

require('dotenv').config({ path: 'path/to/.env' })