Next.js部署到Vercel后环境变量怎么不生效？

___东焕提问于 2026-02-23 17:55:18 阅读 64

框架

我在本地开发时用 process.env.NEXT_PUBLIC_API_URL 能正常读取环境变量，但部署到Vercel后就变成 undefined 了，明明在 Vercel 项目设置里加了同名的环境变量，这是为啥？

我代码里是这样用的：

const apiUrl = process.env.NEXT_PUBLIC_API_URL;

export default function Home() {
  return (
    <div>
      API 地址: {apiUrl}
    </div>
  );
}

本地运行没问题，一上 Vercel 就显示空白，控制台也没报错，就是变量没了。是不是漏了什么配置？

Vercel部署

我来解答赞 15 收藏

反馈

2 条解答

迷人的杏花 Lv1

兄弟，这问题太常见了，十有八九是你改完环境变量没重新部署。

在Vercel上改环境变量不会自动生效，得手动触发一次Redeploy。操作很简单，去你项目的Deployments页面，找到最新的那个deployment，点旁边的三个点或者Redeploy按钮，重新跑一遍就OK了。

还有几个可能的原因：

检查一下环境变量的作用范围（Environment）。你在Vercel后台加变量的时候，有Production、Development、Preview三个选项。你得确认变量加到了对应的环境里。如果你用的是Production环境，那就确保变量加在Production那个标签下。

变量名拼写也要注意，Vercel的环境变量名是区分大小写的，看看是不是哪里大小写不一致。

另外提醒一下，本地开发时读取到的可能是你本地的.env.local文件里的值，跟Vercel上设置的不一定一样。你可以在部署后用console.log打印一下process.env看看具体读到了什么。

改完变量点一下Redeploy，基本就能解决了。

2026-03-11 02:01

轩辕培乐 Lv1

你这个问题其实挺常见的，根本原因在于 Next.js 的环境变量注入机制和 Vercel 的部署行为有点不一致。

本地开发时，.env.local 里的变量会被 Vite 或 Next.js 的 dev server 直接读进 bundle 里，但部署到 Vercel 后，它不会自动把环境变量注入到客户端代码里——哪怕你在 Vercel Dashboard 里加了同名变量，只要没加 NEXT_PUBLIC_ 前缀，或者没勾选“Client-side Environment Variables”，它就不会出现在浏览器端。

不过你代码里已经用了 NEXT_PUBLIC_ 前缀，所以问题大概率出在 Vercel 的配置上。检查一下 Vercel 项目设置里的 Environment Variables，确保：

1. 变量名是 NEXT_PUBLIC_API_URL（注意大小写和下划线）
2. Environment 类型选了 Production（默认是 Development）
3. 关键点：勾上 Client-side（这个复选框默认是不勾的）

如果你是用 Vercel CLI 部署的，还可能因为没加 --prod 导致没加载环境变量，但你这明显是 Dashboard 部署的，所以重点还是检查那个 Client-side 勾选项。

另外，改完环境变量记得重新部署一次，Vercel 不会自动热更新已有的部署。

可以优化成这样更稳妥点：

const apiUrl = process.env.NEXT_PUBLIC_API_URL ?? 'https://default-api.example.com';



export default function Home() {

  return (

    <div>

      API 地址: {apiUrl}

    </div>

  );

}

至少能避免变量没读到时页面直接空白，调试起来也方便点。

2026-02-23 17:56