Vercel平台NextJS应用环境变量读取失败问题求助

核心原因 #

Next.js 对环境变量有严格的暴露规则，默认所有不带特殊前缀的环境变量仅在服务端运行时可访问，不会被打包到客户端代码中，这是出于安全考虑避免敏感变量泄露。

常见排查步骤 #

• 确认.env.local文件存放位置：必须放在项目根目录，和next.config.js文件同级，不要放在src等子目录内。
• 确认修改环境变量后已经重启了开发服务器：Next.js 环境变量不会热更新，每次修改.env类文件都必须重新执行next dev才能生效。
• 先验证服务端环境变量是否正常加载：
  新增测试API路由pages/api/test-env.ts，代码如下：

  export default function handler(req, res) {
    res.status(200).json({
      clientId: process.env.CLIENT_ID,
      clientSecret: process.env.CLIENT_SECRET
    })
  }
  

  启动服务后访问http://localhost:3000/api/test-env，如果能正常返回两个变量的值，说明环境变量本身加载正常，问题出在代码调用位置。

对应解决方案 #

你提供的代码中使用了Node.js专属的BufferAPI，且涉及CLIENT_SECRET这类敏感凭证，这段逻辑绝对不可以在客户端执行，需要按以下方案处理：

1. 确保getEncodedClientIdAndSecret函数仅在服务端逻辑中调用：包括API路由、服务端组件、getStaticProps/getServerSideProps等服务端运行的代码块，不要在带'use client'指令的客户端组件、前端生命周期函数、用户事件处理函数中调用。
2. 如果确实需要在客户端使用非敏感变量（例如CLIENT_ID），可以将.env.local中的对应变量名添加NEXT_PUBLIC_前缀，比如改名为NEXT_PUBLIC_CLIENT_ID，代码中通过process.env.NEXT_PUBLIC_CLIENT_ID访问即可。注意：CLIENT_SECRET这类敏感凭证禁止加该前缀，否则会泄露到所有访问网站的用户端代码中
3. 若使用Vercel CLI拉取变量，确认拉取时选择了development环境，避免拉错生产/预览环境的配置。

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