使用 .env.local 文件。客户端上未定义获取 process.env.NEXT_PUBLIC_VERCEL_ENV

Question

我将 Next.js 与 Vercel 结合使用。这是我的.env.local文件：

# Created by Vercel CLI
VERCEL="1"
VERCEL_ENV="development"
VERCEL_URL=""
VERCEL_GIT_PROVIDER=""
VERCEL_GIT_REPO_SLUG=""
VERCEL_GIT_REPO_OWNER=""
VERCEL_GIT_REPO_ID=""
VERCEL_GIT_COMMIT_REF=""
VERCEL_GIT_COMMIT_SHA=""
VERCEL_GIT_COMMIT_MESSAGE=""
VERCEL_GIT_COMMIT_AUTHOR_LOGIN=""
VERCEL_GIT_COMMIT_AUTHOR_NAME=""

我有一个正在尝试访问的组件：process.env.NEXT_PUBLIC_VERCEL_ENV以确保它位于development环境中。

这就是我跑步时得到的结果npm run dev。

来自服务器的日志：

上面的日志非常有道理。因为它在本地服务器上运行来呈现页面。

但是当我的客户端代码尝试做同样的事情时，我得到：

这就是我尝试访问它的方式：

console.log(`process.env.NEXT_PUBLIC_VERCEL_ENV: ${JSON.stringify(process.env.NEXT_PUBLIC_VERCEL_ENV)}`);
console.log(`process.env.VERCEL_ENV: ${JSON.stringify(process.env.VERCEL_ENV)}`);

在客户端，VERCEL_ENV应该是未定义的，但NEXT_PUBLIC_VERCEL_ENV应该是development，对吧？

可能会发生什么？

---

更新

我什至尝试添加NEXT_PUBLIC_VERCEL_ENV="development"到文件中.env.local。但到目前为止，结果是一样的。

Answer 1

NEXT_PUBLIC_VERCEL_ENV="development"

您可以在任何地方（在浏览器和服务器中）访问它。

VERCEL_ENV="development"

您只能在服务器中访问它，在浏览器中它将显示未定义。

请注意，在文件中添加或进行任何更改后，.env.local您必须重新启动服务器，否则它将显示undefined您是否console.log更改了变量。