如何在 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;

Answer 1

您可以使用 dotenv-cli，然后在 package.json 中为不同的环境设置不同的 .env 文件。类似于：

{
  ...
  "scripts": {
    "dev:production": "dotenv next", // Uses .env file
    "dev:staging": "dotenv -e .env.staging next" // Uses .env.staging file
  }
  ...
}

Answer 2

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' })

Answer 3

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

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

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

使用内置的环境变量支持是不可能的。目前正式支持的环境只有3种，分别是：“development”、“test”、“production”。 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”变量进行生产构建。

Answer 4

Next 9.4 support out of the box environment variables and included support for multiple environments.

新环境变量支持

环境变量默认只在Node.js环境下可用
以NEXT_PUBLIC_为前缀的环境变量暴露给浏览器

公开环境变量

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

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

Answer 5

您可以通过以下两种方式在 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
}

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

"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 文件。

Answer 6

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

最好在运行时准备好您的环境。我们创建了一个允许下一次静态优化的包，并且仍然有运行time env vars via 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}
  }
  ...
}

Answer 7

如果您想在没有任何第 3 方库的情况下使用它，您可以在脚本开头使用 NEXT_PUBLIC_ 直接从脚本公开它，例如：

"scripts": {
  "start": "NEXT_PUBLIC_APP_ENV=development next dev"
}

比与

一起使用

console.log(process.env.NEXT_PUBLIC_APP_ENV); // >>> development

Answer 8

对于任何有兴趣使用 .yml 文件来轻松管理环境变量的人，我是这样做的。

在 devDependencies.

中安装插件 yenv

在next.config.js中添加以下配置：

const path = require("path");
const yenv = require("yenv");
const { PHASE_DEVELOPMENT_SERVER } = require("next/constants");

module.exports = (phase) => {
  const isDev = phase === PHASE_DEVELOPMENT_SERVER;
  const NEXT_ENV = isDev ? "development" : process.env.APP_ENV;
  const rawEnv = yenv(path.resolve(".env.yml"), { raw: true, env: NEXT_ENV });
  
  return {
    ...some other config,
    env: getEnvVars(rawEnv, isDev).raw,
    compress: true,
  };
};

function getEnvVars(rawEnv, dev) {
  const NEXT_PUBLIC = /^NEXT_PUBLIC_/i;
  const raw = Object.keys(rawEnv)
    .filter((key) => NEXT_PUBLIC.test(key))
    .reduce((env, key) => {
      env[key] = rawEnv[key];
      return env;
    }, {});
  // Stringify all values so we can feed into Webpack DefinePlugin
  const stringified = {
    "process.env": Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };
  return { raw, stringified };
}

现在只需在 package.json 脚本中根据环境添加不同的构建命令。

"scripts": {
    "dev": "node server.js",
    "build:production": "APP_ENV=production next build",
    "build:staging": "APP_ENV=staging next build",
    "start": "NODE_ENV=production node server.js"
  },

现在您可以通过单个文件 .env.yml 使用环境变量，如下所示：

base:
  NEXT_PUBLIC_SECRET_KEY : ""
  NEXT_PUBLIC_ANOTHER_SECRET: ""

development:
  ~compose: base
  NEXT_PUBLIC_SECRET_KEY: "bnbnfjf"

staging:
  ~compose: base
  NEXT_PUBLIC_SECRET_KEY: "absadsad"

production:
  ~compose: base
  NEXT_PUBLIC_SECRET_KEY: "lasjdasodsdsad"

现在您可以调用 npm run build:production 来加载生产环境变量和 npm run build:staging 来加载暂存环境变量。

这样可以为您的用例提供任意数量的环境。您只需要添加一个构建命令，并在 .env.yml 中更新环境变量就可以了。

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

How to use different .env files with nextjs?

environment-variables

reactjs

next.js

新环境变量支持

公开环境变量