Images not loading when deploying Next.js on GitHub Pages

I have recently deployed my Next.js application on GitHub Pages. Everything seems to work fine, except for the fact that some images on my website are not loading properly.

The website is located at https://jamalakbara.github.io/bahana/ and the source code can be found at https://github.com/jamalakbara/bahana. When I run the application locally, all images are loading without any issues. However, when I deploy it on GitHub Pages, only some of the images are displayed while others are not.

Has anyone else experienced a similar issue when deploying Next.js on GitHub Pages? How can I resolve this issue and ensure that all images are properly displayed on my website?

I have checked the file paths and made sure that they are correct. I have also tried using different image formats, but the issue still persists.

When you make the request for the JS files the path is this: https://jamalakbara.github.io/bahana/_next/static/kOjK2aFcF_hCMAU3ufAGg/_ssgManifest.js


When you make the request for images it's this: https://jamalakbara.github.io/img/logo.png

It should be: https://jamalakbara.github.io/bahana/img/logo.png and if you go to this you'll see that your asset does in fact appear!

Github pages is trying to serve the content from https://jamalakbara.github.io/ for images. We'll need to append the /bahana to every image request.

That can get really tedious so how I would do it is make a file called prefix.ts with the following:

const prefix = process.env.NEXT_PUBLIC_BASE_PATH || '';

export { prefix };

Then everywhere you use Next's Image tag you'd update the source to be:

<Image src={`${prefix}/logo.png`} />

or whatever the name of the image file is.

To resolve the issue of CORS headers and allow access to jamalakbara.github.io, you can follow these steps:

Locate the file in your code where the request to jamalakbara.github.io is being made.

Add the following code at the beginning of your server-side script to enable CORS:

header('Access-Control-Allow-Origin: jamalakbara.github.io');

header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

header('Access-Control-Allow-Headers: X-Requested-With, Content-Type');

Note: Replace jamalakbara.github.io with the appropriate domain name or wildcard (*) if needed.

Save and deploy your code changes.

Now your server will allow requests from jamalakbara.github.io domain.