_next/image endpoint does not forward along request headers

[WesleyKapow]

Goals

1. I want to be able to use the native _next/image endpoint to provide dynamic responsive images.
2. I want to be able to resize private images that require auth.

Non-Goals

No response

Background

The fetch done here does not pass the headers it received. This breaks requests that require authentication.

next.js/packages/next/src/server/image-optimizer.ts

Lines 588 to 591 in f33a4b3

	export async function fetchExternalImage(href: string): Promise<ImageUpstream> {
	const res = await fetch(href, {
	signal: AbortSignal.timeout(7_000),
	}).catch((err) => err as Error)

Proposal

Allow a next.config.js setting to enable forwarding request headers (in my case cookies).

[WesleyKapow]

Following up here with my work around.

Customize the loader used by <Image> via https://nextjs.org/docs/pages/api-reference/components/image#loaderfile

export default function myImageLoader({
  src,
  width,
  quality,
}: ImageLoaderProps) {
  if (src.startsWith("https://private-media.example.com")) {
    return `/api/image?url=${src}&w=${width}`;
  }

  // Use Next.js default loader for local images.
  return `${src}?w=${width}&q=${quality || 75}`;
}

Set up an app/image/route.ts to handle the resizing yourself. For this I used https://sharp.pixelplumbing.com/

My app/image route verifies user is logged in and then does the following to request the image from my private media server.

    const response = await fetch(url, {
      headers: req.headers,
    });

Be sure to set cache headers!

    return new NextResponse(new Uint8Array(imageBuffer), {
      status: 200,
      headers: {
        "Cache-Control": "public, max-age=31536000, immutable",
        "Content-Type": "image/png",
      },
    });

With these in place, I can then use <Image src="https://private-media.example.com/big-image.jpg" width="150"/> like normal, and Next will use my loader to rewrite this to setup src and srcset for responsive images using /api/image?url=https://private-media.example.com/big-image.jpg&w=256 which will then get CACHED by the user's browser. MAGIC!