使用 .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 文件中添加或进行任何更改后，您必须重新启动服务器，否则如果您 console.log 变量，它将显示 undefined。

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

Using .env.local file. Getting process.env.NEXT_PUBLIC_VERCEL_ENV is undefined on client

environment-variables

next.js

vercel