[Next.js] 使用环境变量的简单方法

管理环境变量是构建可扩展和可维护的Next.js应用程序的关键方面。本文探讨如何有效利用环境变量，包括 process.env.NODE_ENV，.env 文件，NEXT_PUBLIC_ 前缀等。

process.env.NODE_ENV

在Next.js中，process.env.NODE_ENV 允许您访问当前的Node.js环境变量。

// 访问 NODE_ENV 变量
const env = process.env.NODE_ENV;
console.log(`环境：${env}`);
// 输出：环境：development

上述代码访问当前的Node环境并打印。通常情况下，它将是development、production或test之一。

.env 文件：定义环境变量

Next.js提供了若干 .env 文件，用于为开发的不同目的和阶段定义环境变量。下面是每个文件的概述：

• .env: 用作定义环境变量的默认文件。所有环境中都将加载它。
• .env.development: 专为development环境而设，此文件允许您为开发目的设置变量。
• .env.production: 使用此文件定义production环境中所需的变量。
• .env.test: 此文件容纳test环境的环境变量。
• .env.local: .env.local 文件可以在本地级别覆盖变量，不包括test环境。

优先级与重叠键

在变量跨多个 .env 文件定义的情况下，Next.js会按照特定顺序仔细加载这些文件，以确定应使用哪个值。如果存在重叠的键，优先级更高的文件将覆盖其他文件的值。

1. 本地覆盖: .env.local 文件具有最高的优先级（1），允许在本地级别覆盖变量，测试环境除外。
2. 特定环境的文件: 其次的优先级（2）是像 .env.development，.env.production 和 .env.test 这样的特定环境文件。它们用于定义各自环境的变量。
3. 默认文件: 最后，.env 文件具有最低优先级（3），用于规定所有环境中加载的环境变量。

例如，您在 .env 文件中为键 API_URL 有以下定义：

让我们探讨Next.js如何加载这些文件，以确定不同环境中 API_URL 的值。

在Development环境中

1. 如果 .env.local 存在并定义了 API_URL，则使用该值。
2. 否则，使用 .env.development 中的值。
3. 如果未在 .env.development 中定义，则采用 .env 中的值。

在Production环境中

1. 如果 .env.local 存在并定义了 API_URL，则采用该值。
2. 如果没有，则从 .env.production 中获取值。
3. 如果未在 .env.production 中定义，则选择 .env 中的值。

在Testing环境中

1. 如果 .env.local 存在并定义了 API_URL，则使用该值。
2. 如果没有，则使用 .env.test 中的值。
3. 如果未在 .env.test 中定义，则采用 .env 中的值。

为浏览器打包环境变量

在Next.js中，环境变量可以打包并暴露给浏览器，以允许客户端代码访问某些配置或设置。当您需要配置客户端库或服务时，此功能特别有用。

然而，务必注意暴露给浏览器的变量，因为这可能会导致安全风险。任何敏感信息，如密钥或密码，都不应包括在从浏览器可访问的变量中。

使用 NEXT_PUBLIC_ 前缀

要将环境变量暴露给浏览器，您可以使用 NEXT_PUBLIC_ 为变量添加前缀。例如，如果您想要使API端点URL在浏览器中可用，您可能会在 .env 文件中定义如下内容：

NEXT_PUBLIC_VAR=value

该变量将被内联到JavaScript捆绑包中，并可以通过 process.env.NEXT_PUBLIC_VAR 在您的客户端代码的任何地方访问。

代码示例

以下是一个简单示例，说明如何在React组件中使用此变量：

// 访问带有 NEXT_PUBLIC_ 前缀的变量
const publicVar = process.env.NEXT_PUBLIC_VAR;
console.log(`公共变量：${publicVar}`);
// 输出：公共变量：value

安全考虑

如前所述，将环境变量暴露给浏览器需要仔细考虑安全影响。任何带有 NEXT_PUBLIC_ 前缀的变量都将包括在客户端代码中，并且可以由查看您网页源代码的任何人访问。

切勿使用 NEXT_PUBLIC_ 前缀暴露敏感信息，例如密钥或个人数据。这样做可能会将此信息暴露给恶意用户，并对您的应用程序的安全构成重大风险。

在Next.js中管理环境变量对于构建健壮的应用程序至关重要。各种 .env 文件提供了对环境特定配置的灵活性和控制。通过了解这些文件的优先级和正确用法，您可以提高Next.js项目的效率和可维护性。

常见问题解答

1. Next.js中的不同 .env 文件是什么?
   它们为不同阶段定义环境变量：.env 用于默认，.env.development 用于development，.env.production 用于production，.env.test 用于测试，.env.local 用于本地覆盖。
2. 我如何将环境变量暴露给浏览器？
   使用 NEXT_PUBLIC_ 为变量添加前缀。这使其在客户端代码中可访问。
3. 将所有环境变量暴露给浏览器安全吗？
   不，避免暴露敏感信息以防止安全风险。
4. 我如何管理不同 .env 文件之间的重叠键？
   Next.js使用文件的优先级来确定变量值。注意这个顺序。
5. 我可以覆盖特定环境的环境变量吗？
   是的，使用像 .env.development 或 .env.production 这样的特定 .env 文件。.env.local 可以在本地覆盖变量，测试中除外。