Next.js <Image/> not working when deployed from Windows

[Thaigun]

[REQUIRED] Environment info

firebase-tools: 13.4.1

Platform: Windows

[REQUIRED] Test case

The following steps work and yield a good deployment when executed from Linux or Mac (n=1+1). However, not on Windows (n=2).

Trying to deploy Next.js app to Firebase has an issue with next/image when deploying to Firebase hosting from Windows.

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

import Image from "next/image";
import city from "../public/city.png";

export default function Page() {
  return <div>
     <h1>Hello, Next.js!</h1>
    <Image src={city} alt={'City skyline'} />
  </div>;
}

Please note that these steps work on other platforms than Windows.

[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.
4. Add a png image in public/city.png.
5. Run npm run dev to ensure that it's working locally.
6. Try to deploy again. If it complains about missing sharp, feel free to npm install sharp and try again.

[REQUIRED] Expected behavior

You should see your city.png image on the deployed site. As part of the deploy process, a frameworks function to serve Next.js image optimization is created and deployed. This happens on Linux and Mac, and is shown as part of the deploy script.

[REQUIRED] Actual behavior

No image on the deployed site. Deployment is seemingly successful, but after navigating to your freshly hosted page, the image cannot be loaded.

[aalej]

Hey @Thaigun, thanks for raising this and for creating a detailed report. I’m able to reproduce this issue. As you mentioned, when trying to deploy using a Mac machine, the image is loaded properly when opening the site. However, when deploying on a Windows machine, the image did not load.

I’ll raise this issue to our engineering team.