如何在 nextjs 中使用不同的 .env 文件？

Question

我想为环境变量提供不同的配置文件，并能够在我的下一个项目中使用它们。我看到了 dotenv 的例子。

但我不喜欢在 .env 文件中定义变量，也在 config.next.js 文件中定义它们。如果由于某种原因我将变量放在 .env 文件中，但忘记将它们放在 config.next.js 文件中，则代码开始出现问题。有没有更高效的方法？

我在 package.json 中的脚本：

 "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "lint": "eslint pages --ext .ts,.tsx,.js",
    "test": "jest",
    "commit": "git-cz",
    "dev:production": "dotenv next"
},

我的 .env 变量

TITULO=react, typescript, material ui App

零件

import { NextPage }          from 'next';
import { FunctionComponent } from 'react';

interface HelloWorldProps {
  nombre: string,
  saludo?: string
}

const HelloWorld: FunctionComponent<HelloWorldProps> = ({ nombre, saludo = 'noches' }: HelloWorldProps) => (
  <>
    <h1>Hola {nombre} buenas {saludo}</h1>
    {/* eslint-disable-next-line multiline-ternary */}
    <h2>{process.env.TITULO ? 'hola' : 'adios'}</h2>
  </>
);

const Home: NextPage = () => <HelloWorld nombre="cristian" />;

export default Home;

原文由 Cristian Flórez 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

• .env.development
• .env.staging
• .env.prestaging
• .env.production

使用内置的环境变量支持是不可能的。目前官方支持的环境只有 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”变量进行生产构建。

原文由 Alexander Kim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

这通过在运行时从白名单环境变量生成环境配置对象来实现：

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

原文由 AndrewMcLagan 发布，翻译遵循 CC BY-SA 4.0 许可协议