如何在 Next 中处理不同的 .env 文件？答案

【问题标题】：How to handle different .env files in Next?如何在 Next 中处理不同的 .env 文件？
【发布时间】：2020-04-20 18:07:47
【问题描述】：

我想要什么

我创建了一个新的 Next 项目，我想根据 NODE_ENV 变量管理应用程序行为。应用程序必须加载位于不同 .env 文件中的不同变量。埃杰。如果我加载NODE_ENV=development，应用程序应该加载位于.env.development 文件中的变量。在 Next 中最有效和最安全的方法是什么。

我有什么

package.json

在dev 脚本中，我传递了环境类型：

"scripts": {
    "dev": "cross-env NODE_ENV=development next",
    "build": "next build",
    "start": "next start",
  },

next.config.js

在下一个配置中，我根据 NODE_ENV 变量在 package.json 中传递 devscript 从正确的 .env 文件和 dotenv 库加载环境变量。

const path = require('path');
const withOffline = require('next-offline');
const webpack = require('webpack');

require('dotenv').config({
  path: path.resolve(
    __dirname,
    `.env.${process.env.NODE_ENV}`,
  ),
});

module.exports = withOffline({
  webpack: (config) => {
    // Returns environment variables as an object
    const env = Object.keys(process.env).reduce((acc, curr) => {
      acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
      return acc;
    }, {});

    // Allows you to create global constants which can be configured
    // at compile time, which in our case is our environment variables
    config.plugins.push(new webpack.DefinePlugin(env));
    return config;
  },
});

.env.development

TITLE=modo development

pages/index.js

function HomePage() {
  return <div>{process.env.TITLE}</div>
}

export default HomePage

通过这种方法...

这是在 Next 中处理不同 .env 文件的最有效和最安全的方法吗？

【问题讨论】：

.env 文件必须加载
这是什么意思？我正在加载.env.${process.env.NODE_ENV} 中的next.config.js 文件。
使用 env 文件获取配置值
你能举个例子吗。

标签： node.js environment-variables next.js

【解决方案1】：

Nextjs默认支持env，不需要使用webpack.DefinePlugin，只需将其传递给next.config.js的env属性即可。

所以你的代码会变成：

// next.conf.js
const path = require('path');
const withOffline = require('next-offline');
const webpack = require('webpack');

require('dotenv').config({
  path: path.resolve(
    __dirname,
    `.env.${process.env.NODE_ENV}`,
  ),
});

module.exports = withOffline({
  env: {
    VAR_1: process.env.VAR_1
    ...
    // List all the variables that you want to expose to the client
  }
});

注意：这些环境变量可能会暴露给客户端（如果您在您的应用页面之一中使用它们）。

例如，如果您的process.env 包含机密，并且错误地您在页面使用的页面/组件之一中使用了其中一个，则它们将位于 js 文件中下载到客户端。

从 Next.js 9.4 开始，有一个内置的 .env 加载功能，请在此处阅读 https://nextjs.org/docs/basic-features/environment-variables

【讨论】：

嗨，felixmosh 感谢您的回答。我有两个问题......如果这种方法在前端暴露了我的变量，如何管理我的秘密？以及管理不同 .env 文件的最佳方式或最佳实践是什么。
正如我所写的，只有env 是其中一个页面中next.conf 和usage 的一部分也会暴露给客户。跨度>
像魅力一样工作！

【解决方案2】：

同意@felixmosh，Nextjs默认支持env，不需要使用webpack.DefinePlugin，但是……
在每个环境加载不同的配置时，可能会被认为是有限和混乱的。您可以在此处查看常见问题 enter link description here

您可以通过以下小步骤轻松解决此问题。

您需要在根目录上创建一个文件夹配置，其中包含您想要的所有环境阶段。

您可以像这样在 default.js 中添加初始/通用配置。

  API: {
    API_URL: process.env.API_URL || '<http://localhost:4000>',
    ENDPOINT: '********',
    IS_MOCKING_ENABLED: false,
  },
}```

在 publicRuntimeConfig 的 Next.config.js 文件中包含上述配置文件。如果您只想在服务器端使用它，只需像这样使用 serverRuntimeConfig。
```
const APIConfig = config.get('API')
const nextConfig = {
 publicRuntimeConfig: {
  APIConfig,
 },
}
module.exports = nextConfig ```
```
在任何文件中使用。


const { publicRuntimeConfig } = getConfig()
const APIConfig = publicRuntimeConfig.APIConfig
[...] ```

最后，在您的 package.json 中。您可以注入环境变量以加载适当的配置。 "start:local": "NODE_ENV=development run-p dev"
参考：enter link description here详细说明。

【讨论】：