Next.js非NEXT_PUBLIC_前缀环境变量意外暴露至客户端问题求助

首先要澄清一个关键误解：你遇到的不是“环境变量被暴露到浏览器JS环境”，而是服务器组件在服务器端执行时，直接把敏感环境变量的值渲染到了HTML中，客户端收到的是已经渲染完成的页面内容，所以能看到SECRET_VALUE。

Next.js环境变量的核心规则 #

• 带NEXT_PUBLIC_前缀的变量：会被打包到客户端JS中，允许客户端组件直接通过process.env.NEXT_PUBLIC_XXX访问。
• 不带前缀的变量：仅能在服务器端代码中使用（服务器组件、API路由、Server Actions等），但绝对不能将其值输出到客户端可见的内容里——哪怕是服务器组件，渲染后的HTML会被发送到客户端，敏感值会被用户直接看到。

解决步骤 #

1. 停止渲染敏感值到页面：
   永远不要把敏感环境变量的值直接返回或渲染给客户端。如果需要使用该值处理业务（比如调用第三方服务），请在服务器端完成所有逻辑，仅把处理后的非敏感结果返回给客户端。例如，改用API路由：

   // app/api/secret/route.ts
   export async function GET() {
     // 在服务器端使用SECRET处理逻辑
     const result = await fetch('https://api.example.com', {
       headers: { Authorization: `Bearer ${process.env.SECRET}` }
     });
     const data = await result.json();
     // 返回处理后的结果，而非SECRET本身
     return Response.json(data);
   }
   

   然后在客户端组件中调用这个API获取数据。

2. 检查next.config.js配置：
   如果你的配置中使用了env字段显式声明变量，比如：

   module.exports = {
     env: {
       SECRET: process.env.SECRET,
     },
   };
   

   这种配置会强制将变量暴露到客户端（无论是否带前缀），请立即移除这类配置，让Next.js默认处理环境变量。

3. 验证环境变量是否真的被打包到客户端：
   打开浏览器开发者工具，切换到「Sources」标签，搜索SECRET_VALUE或SECRET。如果搜索不到，说明只是服务器渲染的HTML包含了值，环境变量并未暴露到客户端JS；如果能找到，说明存在配置或版本问题，尝试升级到Next.js最新稳定版。

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