Cloudflare 页面 NextJS 环境变量未被读取

Question

我在 cloudflare 页面上托管 NextJS 站点，但我无法读取环境变量。

本地我正在使用

.env.local

:

NEXT_PUBLIC_API_URL=https://localhost:5001/

并用代码阅读它：

const apiUrl = process.env.NEXT_PUBLIC_API_URL;

它在本地工作正常，但是当我尝试在 cloudflare 页面环境变量中设置

NEXT_PUBLIC_API_URL

或

API_URL

时，代码总是读取空字符串。

我没有使用边缘运行时，我使用的是静态站点

next export

我做错了什么？如何读取 cloudflare 页面上的环境变量？

Answer 1

tldr：所有

NEXT_PUBLIC_

环境变量的值在构建时都被锁定。

NextJs 文档浏览器的捆绑环境变量有一个脚注：

“注意：构建后，您的应用程序将不再响应这些环境变量的更改。例如，如果您使用 Heroku 管道将在一个环境中构建的 slugs 提升到另一个环境，或者如果您构建并部署单个 Docker镜像到多个环境时，所有 NEXT_PUBLIC_ 变量都将被冻结为构建时评估的值，因此需要在构建项目时适当设置这些值。如果需要访问运行时环境值，则必须设置自己的API 将它们提供给客户端（按需或在初始化期间）。”