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

Question

我想要的是

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

我拥有的

包.json

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

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

下一个.config.js

在下一个配置中，我dotenv根据package.jsonNODE_ENV中dev脚本中的变量传递从带有库的正确 .env 文件中加载环境变量。

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

.env.development

TITLE=modo development

页面/index.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({
  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;
  },
});

通过这种方法...

• 这是在 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
  }
});

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

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

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