Next.js同域图片在Vercel生产环境报502错误的排查与解决

原因 #

你把public目录下的本地静态图片当成了外部域名图片请求，Next.js的图片优化服务会尝试通过外部域名拉取图片，但在Vercel生产环境中，这种请求因权限校验或配置不匹配触发OPTIMIZED_EXTERNAL_IMAGE_REQUEST_UNAUTHORIZED错误，导致502。

实际上public是Next.js默认的静态资源目录，里面的文件不需要通过完整域名访问，直接用相对路径即可被正确识别。

解决办法 #

1. 改用相对路径加载图片（推荐） #

去掉${host}前缀，直接使用相对路径：

<Image src="/images/myimage.png" alt="我的图片" width={xxx} height={xxx} />

这样Next.js会直接读取public目录下的静态图片，不会触发外部图片优化流程，从根源解决问题。

2. 优化next.config.js的图片配置（若必须用域名访问） #

如果因场景需求必须使用完整域名，建议用Next.js推荐的remotePatterns替代旧的domains配置，更精确匹配图片路径：

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        pathname: '/images/**', // 仅允许该路径下的图片
      },
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '3000',
        pathname: '/images/**',
      },
    ],
  },
}

这种配置比宽泛的domains更安全，也能让Vercel的图片优化服务正确识别合法的外部图片请求。

3. 确认静态资源正常部署 #

检查public/images/myimage.png是否被正确提交到代码仓库，未被.gitignore忽略，确保Vercel部署时能同步上传该静态文件。

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