[REQUIRED] Environment info

firebase-tools: 13.5.2

Platform: Mac

[REQUIRED] Test case

Next.js sites deployed to firebase have an issue with next/image when trying to use external URLs.

Request for fetching the image returns 400 with the message "url" parameter is not allowed even if the url in question has been whitelisted in next.config.mjs.

Locally everything works great.

These changes to the default project are enough to show the issue:

app/page.tsx

import Image from "next/image";

export default function Page() {
  return (
    <div>
      <h1>Hello, Next.js!</h1>
      <Image
        src={"https://picsum.photos/200"}
        height={200}
        width={200}
        alt="test image"
      />
    </div>
  );
}

next.config.mjs

// @ts-check
 
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
    images: {
      remotePatterns: [
        {
          hostname: 'picsum.photos',
          protocol: 'https',          
        }
      ]
    }
  }
   
  export default nextConfig

[REQUIRED] Steps to reproduce

Prerequisites: A Firebase project, CLI, and a project with corresponding firebase.json etc. setup. You might have to enable billing (https://firebase.google.com/docs/hosting/frameworks/nextjs).

1. Run firebase init hosting, selecting Next.js integration and following the instructions in the link above.
2. Make sure you can successfully deploy the project.
3. Make the aforementioned changes to app/page.tsx and create next.config.mjs
4. Run npm run dev to ensure that it's working locally.
5. Deploy again and navigate to the url where the next.js project is hosted.
6. The request for fetching the image returns 400 Bad Request.

[REQUIRED] Expected behavior

You should see an image on the page.
Image optimization should work with external URL:s

[REQUIRED] Actual behavior

Request for fetching the image fails with code 400 and a message "url" parameter is not allowed