在NextJS中混合客户端与服务端代码是否安全？

核心结论 #

只要客户端代码未实际引用敏感密钥，Next.js 的摇树优化（Tree Shaking）可以有效阻止敏感信息被打包到客户端代码中，不会引发严重安全问题。

具体分析 #

• 摇树优化的作用机制：Next.js 基于 Webpack 构建，摇树优化会深度分析代码的引用链路，仅保留被实际使用的代码片段。如果你的客户端代码从未导入或使用 REALLY_SECRET_KEY，这个变量会被标记为未使用代码，在打包阶段被彻底剔除，不会出现在最终的客户端 JS bundle 中。
• 可验证性：你可以自行验证这一点——执行 next build 后，查看 .next/static/ 目录下的客户端打包文件，搜索敏感密钥的内容，会发现完全找不到相关字符串。
• 潜在风险需规避：
  • 禁止在客户端代码中间接引用包含敏感密钥的集合，比如如果导出 const allConstants = { SITE_NAME, REALLY_SECRET_KEY } 并在客户端导入 allConstants，摇树优化无法单独剔除对象中的敏感属性，会导致密钥泄露。
  • 不要在客户端代码中使用依赖敏感密钥的辅助函数，哪怕函数没有直接返回密钥，只要逻辑中用到了密钥，打包时就会将其包含进去。

额外建议 #

虽然技术层面安全，但从代码维护和风险防控角度，还是强烈建议将客户端常量与服务端敏感常量分开存放（比如创建 client.constants.ts 和 server.constants.ts），从根源上避免误引用的可能，无需依赖摇树优化作为兜底手段。

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