diff --git a/.changeset/wise-gifts-sit.md b/.changeset/wise-gifts-sit.md new file mode 100644 index 00000000..ce5f2d5b --- /dev/null +++ b/.changeset/wise-gifts-sit.md @@ -0,0 +1,5 @@ +--- +"@opennextjs/cloudflare": patch +--- + +Serve `/cdn-cgi/image/...` images in dev diff --git a/packages/cloudflare/src/cli/templates/worker.ts b/packages/cloudflare/src/cli/templates/worker.ts index a51165cb..3be23be5 100644 --- a/packages/cloudflare/src/cli/templates/worker.ts +++ b/packages/cloudflare/src/cli/templates/worker.ts @@ -32,6 +32,20 @@ export default { populateProcessEnv(url, env.NEXTJS_ENV); + // Serve images in development. + // Note: "/cdn-cgi/image/..." requests do not reach production workers. + if (url.pathname.startsWith("/cdn-cgi/image/")) { + const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?.+)$/); + if (m === null) { + return new Response("Not Found!", { status: 404 }); + } + const imageUrl = m.groups!.url!; + return imageUrl.match(/^https?:\/\//) + ? fetch(imageUrl, { cf: { cacheEverything: true } }) + : env.ASSETS.fetch(new URL(`/${imageUrl}`, url)); + } + + // Fallback for the Next default image loader. if (url.pathname === "/_next/image") { const imageUrl = url.searchParams.get("url") ?? ""; return imageUrl.startsWith("/")