Exploring Next.js for the first time, I recently created a website and attempted to host it on Firebase hosting. Everything seems to be working well except for one issue - the images are not rendering on the hosted site. In my project structure, there are folders named 'project' and 'src' at the root level. The images, saved in PNG format, are located in the public folder and used in pages stored at src/containers/homeContainer. While these images display correctly on the local server, they fail to load on the hosted site. Running 'npm run build' does not generate a build folder as expected in Next.js. My deployment process involves running the following commands with Firebase:
firebase experiments:enable webframeworks
firebase init hosting
firebase deploy
Upon executing 'firebase deploy', a build folder is created containing my PNG files under build/static/media directory. It appears that the issue may stem from the experimental nature of Next.js support on Firebase. Is there a solution to address this problem?
I also attempted to tweak my next.config.js file like so:
const nextConfig = {
output: "export", // (optional) Set your desired output configuration
images: {
unoptimized: true,
},
}
Regrettably, this approach did not resolve the issue.