NextJS如何正确加载环境变量

Question

我习惯于使用React，最近转向了NextJs，但遇到了奇怪的情况。在演示页面呈现此Demo组件;

import React from 'react';

import { Hello, Header } from './demo.styled';

export const Demo = () => {

  const name = process.env.userName || 'world';
  console.log("env vars userName v2: ", name)
  // env vars userName v2:  John Doe

  return (
    <Header>
      <Hello>Hello {name}!</Hello>
    </Header>
  );
};

我有一个 .env 文件，其中的 userName 是 John Doe。如下所示，控制台记录了输出，并成功加载。

但当我的页面加载时，我得到了以下内容：

你好，世界！

我的项目很新，我正在使用

"next": "^12.1.4", "react": "17", "react-dom": "17"

我的页面非常简单，它只是渲染演示组件。

更新

上面设置的日志是在服务器端，但在客户端，我有这个消息：next-dev.js?3515:25 警告：文本内容不匹配。 服务器："Jhon Doe" 客户端："world"

我的理解是，我的 .env 文件仅在服务器端，那么我怎么能在客户端也拥有这些信息呢。

- gxmad

---

你在哪里定义了 process.env.userName 的值？ - Nick Vu

在项目根目录下的 .env 文件中。 - gxmad

Answer 1

根据这份文档，

默认情况下，环境变量只在Node.js环境中可用，这意味着它们不会暴露给浏览器。

对于您的情况，process.env.userName仅在构建时编译，并且仅在服务器端可用。

如果您想在客户端使用它，您需要将配置的前缀改为NEXT_PUBLIC_userName（但是按照命名约定，我建议您将其修改为NEXT_PUBLIC_USERNAME）。

NEXT_PUBLIC_USERNAME=Jhon Doe

接下来您可以将代码更改为

const name = process.env.NEXT_PUBLIC_USERNAME || 'world';

如果您想在客户端显式地暴露 userName，可以按照以下方式更新您的next.config.js。

您原始的环境：

userName=Jhon Doe

next.config.js

module.exports = {
  //add other configs here too
  env: {
    userName: process.env.userName,
  },
}

使用第二种解决方案，您无需修改环境变量。

- Nick Vu

---

更改后重新启动服务器。 - Valladão