部署到Vercel后Next.js项目的Google Analytics无法正常工作怎么办

排查步骤 #

• 修正环境变量命名
  Next.js 规定只有以NEXT_PUBLIC_为前缀的环境变量才能被注入到浏览器端运行的代码中，你当前使用的process.env.NEXT_GOOGLE不符合前缀要求，部署后浏览器端读取到的变量值为undefined，会直接导致GA脚本加载异常。
  对应修改操作：
  1. 把本地.env.local里的变量名修改为NEXT_PUBLIC_GOOGLE_ID（前缀必须正确，后缀可自定义）
  2. 在Vercel后台新增同名环境变量，填入正确的GA测量ID，确认勾选了对应部署环境（Production/Preview/Development）
  3. 将代码中所有process.env.NEXT_GOOGLE替换为修改后的新变量名
• 重新触发Vercel部署
  环境变量修改完成后必须重新发起一次部署，仅修改Vercel后台的环境变量不会对旧的部署产物生效。
• 部署后验证加载状态
  站点更新完成后打开页面，按F12调出开发者工具的网络面板，刷新页面搜索gtag相关请求，确认请求URL中携带的id参数和你的GA测量ID一致，且请求返回200状态码即可。
• 可选冗余代码清理
  你代码顶部已经静态导入了bootstrap样式文件，组件内部的import('bootstrap/dist/css/bootstrap.css')属于重复导入，可直接删除，不会影响GA功能。
• 额外校验
  如果以上操作完成后GA还是没有数据，确认你填写的测量ID格式正确，GA4的测量ID通常为G-开头的字符串，没有多余空格。

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