node.js - Next 中如何处理不同的 .env 文件？

Question

我想要什么

我创建了一个新的 Next 项目，我想根据 NODE_ENV 变量来管理应用程序行为。应用程序必须加载位于不同 .env 文件中的不同变量。 eje。如果我加载 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 变量传递到包中的 dev 脚本，使用 dotenv 库从正确的 .env 文件加载环境变量.json。

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

页面/index.js

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

export default HomePage

用这种方法...

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

Answer 1

Nextjs默认支持env，不需要使用webpack.DefinePlugin，直接传给的env属性即可next.config.js.

所以你的代码会变成:

// 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 包含 secret ，并且错误地您在页面使用的页面/组件之一中使用了其中一个，它们将在下载到客户端的 js 文件中。

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