部署Next.js到Cloudflare Pages时无法读取Supabase环境变量

问题情况 #

我正在将Next.js应用部署到Cloudflare Pages，需通过URL和密钥连接Supabase项目。已在Cloudflare项目控制面板配置对应环境变量，但部署后应用无法正确读取；本地通过.env.local文件设置的环境变量则可正常读取，核心代码如下：

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string

Cloudflare环境变量配置截图：

排查与解决步骤 #

• 核对变量命名一致性
  确保Cloudflare中配置的变量名与代码中的NEXT_PUBLIC_SUPABASE_URL、NEXT_PUBLIC_SUPABASE_ANON_KEY完全一致，包括大小写、下划线等细节——哪怕一个字符差异都会导致读取失败。

• 确认变量部署生效
  在Cloudflare配置完环境变量后，必须点击保存并部署，触发应用重新构建。仅保存变量不会同步到已部署的应用中，这是最容易遗漏的步骤。

• 检查构建日志验证变量注入
  进入Cloudflare Pages的部署详情，查看构建日志，搜索变量名确认构建阶段是否成功加载了环境变量。如果日志中无对应变量记录，说明配置未生效，需重新检查变量设置。

• 核对构建配置正确性
  确认Cloudflare Pages的构建参数设置正确：

  • 构建命令：npm run build（或yarn build，根据项目使用的包管理器）
  • 输出目录：.next
    错误的构建配置会导致环境变量无法注入到静态资源中。

• 本地模拟Cloudflare环境测试
  使用Cloudflare官方工具wrangler在本地模拟部署环境，验证变量读取情况：

  # 全局安装wrangler
  npm install -g wrangler
  # 在项目根目录创建wrangler.toml并配置环境变量
  # 启动本地预览
  wrangler pages dev .next
  

  若本地用wrangler能正常读取变量，说明问题出在Cloudflare平台端配置；若仍无法读取，则需检查代码或变量定义是否有误。

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