Question

我想为环境变量使用不同的配置文件，并能够在我的下一个项目中使用它们。我看到了使用doatenv https://github.com/zeit/next.js/tree/canary/examples/with-dotenv的示例，但是我不喜欢在.env文件中定义变量，也不想在config.next.js文件中定义变量。如果由于某种原因我将变量放在.env文件中，但是忘记将它们放在config.next.js文件中，则代码开始出现问题。有一种方法可以更有效地做到这一点？

我在pachage.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

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

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

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

使用内置的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”变量进行生产构建。

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

大多数这些答案的问题在于它们违背了“一次构建，随处运行”的原则，实际上我们大多数人都在使用这种技术来构建和运行 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}
  }
  ...
}

Answer 4

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

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

Answer 5

对于Next.js 9.3.6版本的.env.development.local和.env.production.local文件

    //next.config.js

    const path = require('path');
    const webpack = require('webpack');

    module.exports = {
      webpack: (config, {dev}) => {
        const env = dev ? "development" : "production";

        config.plugins.push(new webpack.EnvironmentPlugin(require('dotenv').config({ path: path.resolve(__dirname,`./.env.${env}.local`) }).parsed)
        )
        return config
      }
    }

Answer 6

Next 9.4 support out of the box environment variables和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 7

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

Answer 8

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

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

比使用它

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

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

8 个答案:

新环境变量支持

公开环境变量