Skip to content

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

@Thaigun

Description

@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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions