Next.js中非NEXT_PUBLIC_前缀环境变量在api外引用会暴露给浏览器吗

结论 #

你当前的写法完全不会导致API密钥泄露，放心用就行。

原因说明 #

Next.js判断环境变量会不会暴露给浏览器，核心依据不是你把代码写在哪个文件夹，而是这段代码最终会不会被打包到客户端侧的代码包中：

• pages/api目录下的所有代码天生只会在服务端运行，永远不会被打包进客户端产物
• 你现在utilities下的sendEmail函数仅被API路由引用，所以这部分依赖代码也只会在服务端执行，里面调用的所有不带NEXT_PUBLIC_前缀的环境变量，都会在服务端运行时直接读取，不会被嵌入到发送给浏览器的JS文件里。

需要规避的风险场景 #

如果你后续把utilities/myFunction.ts里的方法，直接导入到普通页面组件的客户端逻辑里调用（比如在组件的渲染代码、useEffect回调里直接用），那这时候打包器会把这段代码打包到客户端产物，才会导致密钥泄露。只要保证这个发邮件的工具方法只在服务端逻辑（API路由、getServerSideProps等服务端函数）里引用，就不会有问题。

验证方式 #

你可以本地执行npm run build打包项目，之后在.next/static目录下全局搜索你的SENDGRID_API_KEY值，搜不到就说明完全没有泄露风险。

内容的提问来源于stack exchange，提问作者Y H R