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，正如您在下面看到的控制台日志是输出，它加载得很好。

但是当我的页面加载时，我得到了。

Hello world!

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

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

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

更新

The logs set above are in server side, but in the client side, I have this message: next-dev.js?3515:25 Warning: Text content did not match. Server: "Jhon Doe" Client: "world"

我的理解是我的 .env 文件只在服务器端，所以我怎么可能在客户端也有这些信息。

Answer 1

根据this document

By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser.

至于你的情况，process.env.userName 仅在 build-time 期间编译，仅在 server-side 上可用。

如果你想在 client-side 上使用它，你需要为你的配置添加前缀 NEXT_PUBLIC_userName（但按照名称约定，我建议你将其修改为 NEXT_PUBLIC_USERNAME)

NEXT_PUBLIC_USERNAME=Jhon Doe

然后您可以将代码更改为

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

如果您想在 client-side 上显式公开 userName。您可以像下面这样更新您的 next.config.js

你原来的环境

userName=Jhon Doe

next.config.js

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

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

nextJS 如何正确加载环境变量

nextJS how to load an environment variable properly

next.js

dotenv

更新