Next.js 13 结合DigitalOcean Spaces图片首次加载403错误求助

这不是DigitalOcean的问题，是Next.js 13的Image组件默认优化机制和DigitalOcean Spaces预签名URL不兼容导致的：

• Next.js的Image组件会将远程图片请求转发到自身的图片优化API（/_next/image），这个过程中可能会丢失或篡改预签名URL里的Signature、Expires等验证参数；
• 首次加载（尤其是SSR场景）时，Next服务器转发请求时，签名参数的验证逻辑不匹配原始URL的签名规则，导致DigitalOcean返回403；
• 刷新后浏览器可能直接使用缓存的原始URL，或者客户端渲染时跳过了Next的优化转发，因此能正常加载。

你的onError处理会引发无限循环，是因为每次加载失败后都重复设置同一个无效的URL，导致错误反复触发。

方法1：禁用Next.js图片优化 #

给Image组件添加unoptimized属性，让它直接加载原始预签名URL，跳过Next的优化处理：

<Image
  src={image.url}
  alt="image"
  fill
  unoptimized
/>

方法2：改用原生img标签 #

如果不需要Next的图片优化特性，直接用原生img标签替代，避免Next的URL转发逻辑：

<img
  src={image.url}
  alt="image"
  style={{
    width: '100%',
    height: '100%',
    objectFit: 'cover' // 对应fill属性的效果
  }}
/>

方法3：配置Next.js保留预签名参数（可选） #

如果必须使用Next的图片优化，可以尝试在next.config.mjs中确保remotePatterns允许完整路径，但此方法可能因签名验证逻辑失效而不稳定：

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "fra1.digitaloceanspaces.com",
        pathname: "/**", // 允许所有路径
      },
    ],
  },
}

注意：预签名URL的签名是针对完整URL生成的，Next优化后的URL会添加额外参数（如w、q），大概率还是会触发签名验证失败，因此不推荐此方案。

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