Next.js部署Vercel后OG图片生成与Image标签兼容问题求助

问题核心 #

当使用Edge Runtime的API路由生成Vercel OG图片，并用Next.js <Image />组件引用时，部署到Vercel会触发路由匹配错误。原因是：
<Image />组件会自动将请求转发到/_next/image路径做图片优化，但你的Edge路由api/compare-image/[...image]仅能匹配/api/compare-image/开头的路径，无法识别/_next/image的转发请求，导致路由匹配失败。本地环境正常是因为本地路由处理逻辑与Vercel Edge环境存在差异。

解决方案 #

方案1：保留Edge Runtime，跳过Image组件代理 #

给<Image />添加unoptimized属性，让组件直接请求你的API路由，不经过Next.js的图片优化代理：

<Image
  width={1260}
  height={630}
  src="/api/compare-image/path1" // 注意修正路径，需与API路由前缀一致
  alt=""
  unoptimized
/>

方案2：改用Node.js Runtime #

如果不需要Edge Runtime的特性，直接移除API路由中的export const runtime = "edge";，使用默认的Node.js Runtime。此时Next.js的Image代理请求能被正常处理，路由匹配问题会自动消失。

方案3：手动处理Edge路由的代理请求（复杂，不推荐） #

若必须保留Edge Runtime，可在API路由中手动解析/_next/image的转发请求，提取原图片路径参数后生成图片：

export const runtime = "edge";

export async function GET(request: Request) {
  const url = new URL(request.url);
  
  // 处理Next.js Image的代理请求
  if (url.pathname.startsWith('/_next/image')) {
    const originalSrc = url.searchParams.get('url');
    if (!originalSrc) return new Response('Bad Request', { status: 400 });
    
    // 解析originalSrc中的参数（比如path1），生成对应图片
    // 此处需根据你的业务逻辑补充参数解析逻辑
  }

  // 原OG图片生成逻辑
  return new ImageResponse(
    (
      <div
        style={{
          color: "black",
          width: "100%",
          height: "100%",
          padding: "50px 200px",
          textAlign: "center",
          justifyContent: "center",
          alignItems: "center",
          display: "flex",
          flexDirection: "column",
          backgroundColor: "#0f172a",
        }}
      >
        <div
          style={{
            color: "#e2e8f0",
            fontSize: 80,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}
        >
          Text Image
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

额外注意点 #

• 检查<Image />的src路径是否与API路由前缀一致，你当前示例中src="/api/compare/path1"与路由api/compare-image/[...image]路径不匹配，需修正为/api/compare-image/path1。

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