-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Next.js <Image/> not working when deployed from Windows #6868
Description
[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).
- Run
firebase init hosting, selecting Next.js integration and following the instructions in the link above. - Make sure you can successfully deploy the project.
- Make the aforementioned changes to
app/page.tsx. - Add a png image in
public/city.png. - Run
npm run devto ensure that it's working locally. - Try to deploy again. If it complains about missing
sharp, feel free tonpm install sharpand 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.