Next.js中NEXT_PUBLIC前缀变量存储位置、可访问性及密钥存储疑问

为什么加了NEXT_PUBLIC_前缀的变量在JS文件里找不到？ #

• 必须在构建阶段设置变量：NEXT_PUBLIC_变量是构建时内联到代码中的，构建完成后修改.env文件不会生效，需要重新执行构建命令。
• 核对变量名拼写：确保前缀完整、大小写完全匹配，Next.js对环境变量名的大小写敏感，拼写错误会导致变量无法被识别。
• 确认变量已被客户端代码引用：如果仅定义了变量但未在客户端组件/逻辑中实际使用，Next.js的Tree Shaking机制会剔除未使用的变量，不会出现在最终打包的JS文件里。
• 找对查看位置：变量会被直接替换为具体值内联到使用它的代码处，而不是以process.env.NEXT_PUBLIC_XXX的形式存在，所以要搜索变量的实际值，而非变量名。

能不能用NEXT_PUBLIC_前缀存储密钥？ #

• 分场景判断：
  • 可以存储非敏感的公钥/客户端ID：比如OAuth客户端ID、Google Analytics跟踪ID这类本就需要暴露给前端的公开标识，用NEXT_PUBLIC_前缀没问题。
  • 绝对不能存储敏感密钥：只要加了NEXT_PUBLIC_前缀，变量值会被打包到客户端JS代码中，任何人都能通过浏览器调试工具、查看源码获取到。API密钥、私钥、数据库密码这类敏感内容，必须放在不带前缀的环境变量里，仅在Node.js环境（比如API路由、getServerSideProps等）中使用。

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