生产环境下在浏览器调试器中获取Next.js公开环境变量

能否通过浏览器访问NEXT_PUBLIC环境变量？ #

能。NEXT_PUBLIC_前缀是Next.js专门用来标识可被客户端代码访问的环境变量，这类变量会在构建阶段被注入到客户端打包产物中，直接在浏览器运行的代码里可用。无此前缀的环境变量仅能在服务端代码中访问，不会暴露给浏览器。

存储位置 #

• 构建后：变量并非存在浏览器的存储（如localStorage、sessionStorage）中，而是被直接硬编码进客户端打包生成的JS文件里（比如各chunk文件）。
• 运行时：在浏览器中，这些变量会挂载到process.env对象下（模拟Node.js的环境变量对象），或者根据代码封装逻辑存在组件/模块的作用域中。

DevTools中debugger后查找变量的方法 #

• 控制台直接查询：在DevTools的Console面板输入process.env.NEXT_PUBLIC_[你的变量名]，如果变量正确注入，会直接返回对应值；若返回undefined，则说明构建时未成功注入。
• Sources面板搜索定位：触发debugger断点后，在Sources面板中找到对应的客户端JS chunk（比如pages/_app.js的打包文件），按Ctrl+F搜索NEXT_PUBLIC_，就能找到变量被替换后的具体位置。
• Scope面板查看：在Sources面板右侧的Scope区域，展开Local或Global作用域下的process.env对象，就能看到所有已注入的NEXT_PUBLIC_前缀变量。

额外排查提示 #

如果变量无法被浏览器访问，优先检查：

• 变量名是否严格以NEXT_PUBLIC_开头，拼写无错误
• .env文件是否放在项目根目录，格式正确（无多余空格、引号使用规范）
• 构建命令执行时，.env文件是否被正确加载（比如构建前不要删除或移动该文件）

内容的提问来源于stack exchange，提问作者ViktorMS