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

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

框架

我在本地开发时用 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部署

我来解答赞 8 收藏

反馈

1 条解答

轩辕培乐 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