I've been trying to load photos and favicon on GitHub pages for a month now and no result at all. Even tried with a boilerplate project from npx create-next-app@latest and it doesn't load the images and favicon from a public folder at all. It's not the path obviously it's something from the configs, I guess, but I can't find a solution; even ChatGPT can't help. Any guidance would be appreciated.
-
How are you deploying your next.js page to gh pages? Refer this gh action workflow for example: github.com/actions/starter-workflows/blob/main/pages/nextjs.yml (you'll need to update the variables and build commands (they are for old next.js)) -- also note that gh pages only support static pages, so many Next.js features won't work with it -- nextjs.org/docs/app/building-your-application/deploying/…brc-dd– brc-dd2023-09-20 14:22:52 +00:00Commented Sep 20, 2023 at 14:22
-
Since its boilerplate - 1. git init 2. git add . 3 git commit and the rest of the steps, after that settings -> Pages -> Sources and I choose the Github actions and after that it needs to generate nextjs.yml. Done. Later i see address that the site is live. So what needs it to be configured in this nextjs.yml?user18022537– user180225372023-09-20 14:39:03 +00:00Commented Sep 20, 2023 at 14:39
Add a comment
|
1 Answer
I had the same problem last time. I was able to figure it out, in my case the images were in Capitalize, and GitHub pages are very sensitive about file names. :
Please go ahead and check the following:
- Image extension should be in a small case and exact spell. E.g. jpeg and jpg are not the same, jpg and Jpg are not same, JPG and jpg are not same, etc.
- No underscores in path names or names "_".
- Try checking the path, proper use of "../" or "./" etc. E.g: src="./next.svg"
<Image className={styles.logo} src="./next.svg" alt="Next.js Logo" width={180} height={37} priority /> - Wait for some time after deploy
- Hard refresh your browser.
I hope this will fix this. :)
Here is my build on github pages:
3 Comments
user18022537
Well since its generated from npx create-next-app, without touching the image extension and they are with small case in public folder the favicon.ico and vercel and next.svg the paths are correct, can you share your config.next.js i guess its something from there i tried const nextConfig = { reactStrictMode: true, images: { loader: 'akamai', path: '', }, assetPrefix: './', }; no luck :(
Sajid
Hey dude, Can you check the bullet 3, where I have mentioned paths. Try using "./" in your image path. It should work. <Image className={styles.logo} src="./next.svg" alt="Next.js Logo" width={180} height={37} priority />
Sajid
and here is my next.config.js: const nextConfig = { reactStrictMode: true, }; Its the default one, I have not added anything.