nextJS 如何正确加载环境变量

Question

我习惯了 React，最近转向 NextJs，但面临着一个奇怪的场景。将此演示组件呈现在演示页面中；

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 文件，其中用户名是 John Doe，正如您在控制台日志下面看到的那样，它是输出，并且加载良好。

但是当我的页面加载时，我明白了。

你好世界！

我的项目是最近的，我正在使用

“下一个”：“^12.1.4”，“反应”：“17”，“反应-dom”：“17”，

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

更新

上面设置的日志位于服务器端，但在客户端，我收到以下消息：next-dev.js?3515:25 警告：文本内容不匹配。服务器：“Jhon Doe”客户端：“world”

据我所知，我的 .env 文件仅位于服务器端，那么我如何在客户端也拥有这些信息。

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,
  },
}

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