Next.js部署Vercel后process.env环境变量在组件内未生效怎么办

问题根本原因 #

你用到的3个EmailJS相关变量属于客户端侧运行的前端代码，当前主流前端框架为了避免敏感环境变量意外泄露到浏览器侧，默认只会将符合指定前缀规则的环境变量注入到客户端打包产物中。你提到可正常生效的STORYBLOK_API_KEY未在组件内使用，推断是在服务端逻辑（如静态生成、服务端API路由）中调用，服务侧运行的代码不受前缀规则限制，可直接读取所有环境变量。

解决方案 #

按照你使用的框架规则调整即可：

1. 给客户端环境变量添加指定前缀 #

• 若使用Vite（适配Vue/React/Svelte等项目）：
  修改.env文件中的变量名，添加VITE_前缀，示例：

  VITE_EMAILJS_SERVICE_ID=你的值
  VITE_EMAILJS_USER_ID=你的值
  VITE_EMAILJS_TEMPLATE_ID=你的值
  

  代码调用方式同步修改为：

  service_id: import.meta.env.VITE_EMAILJS_SERVICE_ID,
  template_id: import.meta.env.VITE_EMAILJS_TEMPLATE_ID,
  user_id: import.meta.env.VITE_EMAILJS_USER_ID,
  

• 若使用Create React App：
  修改.env文件中的变量名，添加REACT_APP_前缀，代码调用保持process.env.XXX格式即可。
• 若使用Next.js：
  修改.env文件中的变量名，添加NEXT_PUBLIC_前缀，代码调用保持process.env.XXX格式即可。

2. 本地生效配置 #

确认.env文件放在项目根目录（和package.json同级，不要放在src等子目录内），修改完成后重启本地开发服务，环境变量修改不支持热更新，必须重启才能生效。

3. Vercel部署配置 #

• 进入对应项目的Settings > Environment Variables页面，添加修改前缀后的3个环境变量
• 确保勾选Expose to Browser选项（框架识别到对应前缀会自动勾选，建议手动确认）
• 配置完成后重新触发一次部署，已有部署产物不会自动读取新的环境变量

补充说明：EmailJS的这三个ID属于官方允许暴露在前端的公开标识，无需担心泄露风险。

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