Next.js部署Vercel后生产环境仅登录API出现502错误求排查

结合你提供的nextConfig配置，问题主要出在rewrites规则的地址拼接错误上：

1. API重写的地址缺少关键斜杠 #

第一个重写规则的目标地址拼接存在格式问题：

destination: `http://${process.env.API}api/:path*`,

如果process.env.API的值是类似api.example.com这种不带末尾斜杠的域名，拼接后会变成http://api.example.comapi/:path*——域名和api路径直接连在一起，导致目标地址完全无效。Vercel无法把请求转发到正确的API服务器，自然返回502错误。

开发环境能正常运行，大概率是你本地API的地址格式刚好兼容（比如本地API地址是localhost:3000/带末尾斜杠），所以没触发这个问题，但部署到Vercel后，环境变量的格式差异就暴露了错误。

2. 视频路径重写的语法错误 #

第二个重写规则也存在明显问题：

destination: `https://${process.env.CONVERT_DATA}:filename*`,

这里的:filename*应该改为/${filename*}，冒号是Next.js路径参数的标识，目标地址里需要用斜杠来拼接实际路径，否则会把:filename*当成端口号的一部分，导致地址无效。不过这个错误暂时不影响登录API，但也需要修正。

修正方案 #

修改rewrites规则，确保地址拼接逻辑正确：

async rewrites() {
  return [
    {
      source: "/api/:path*",
      // 给API地址拼接时添加斜杠，避免域名和路径连在一起
      destination: `http://${process.env.API}/api/:path*`,
    },
    {
      source: "/video/:filename*",
      destination: `https://${process.env.CONVERT_DATA}/:filename*`,
    }
  ]
},

另外再确认下Vercel后台的环境变量API是否正确设置——注意不需要带http前缀，因为代码里已经手动加了http://。

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