Error: Invariant: no match found for request. Pathname '/_next/image' should have matched '/api/compare-image/[...images]

Question

I'm currently working on a Next.js project and I'm encountering an issue when trying to use Vercel OG image generation along with the Image tag in the client.

Here's the error I'm facing:

Error: Invariant: no match found for request. Pathname /_next/image should have matched /api/compare-image/[...image]

Interestingly, this issue only occurs when deployed to Vercel. Everything works perfectly fine in the local build.

The error seems to be originating from the following file:

../../node_modules/next/dist/esm/server/web/edge-route-module-wrapper.js:57:18

I'm using Next.js version 13.4.19.

To give you some context, here's what I've done:

1. Created a dynamic route in the API folder named compare-image/[...image].
2. Utilized the Vercel OG image generation package in this API route to generate the image.
3. Attempted to use the generated image's path in the <Image /> component.
4. Deployed the project on Vercel.

Here's the code for api/compare-image/[...image] for reference:

export const runtime = "edge";

export async function GET(request: Request) {
  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,
    }
  );
}

And here's how I'm using this API in page.tsx:

<Image
  width={"1260"}
  height={"630"}
  src={"/api/compare/path1"}
  alt={""}
/>

It's worth noting that when I remove export const runtime = "edge";, the issue disappears, and everything works as expected.

I'd greatly appreciate any assistance with resolving this issue. Thank you!