js and css not loading when hosting next application on GitHub pages

Question

Next.js builds all the static assets in _next folder but Github pages does not need to serve those files. I am 404 for static assets.

Example repo: https://github.com/ajaymathur/ajaymathur.github.io Master branch is hosted and dev branch is for development.

And I guess github pages is not hosting paths starting with -. How can I get around this issue?

Hungry

Answer 1

Add a .nojekyll file in the root of your pages repo.

This disables Jekyll processing and lets the _next folder (which contains an underscore) get copied to the final website.

Lohse

I referenced this answer in this Next.js GitHub issue. – Lohse

Awesome, spent almost a day struggling with this problem, I wasn't aware of this github page jekyll processing! – Cassidy

Answer 2

Simply adding a .nojekyll file wasn't enough for me. I had to change the build command to add the file after the export to static HTML/CSS/JS like this

  "scripts": {
    ...
    "static": "next build && next export && touch ./out/.nojekyll && echo 'www.mywebsite.com' > ./out/CNAME",
    ...
  },

I am also using gh-pages to copy the files from the out folder to the branch Github Pages will serve, by default the .nojekyll file was not copied over. This can be circumvented by setting the -t option to true

  "scripts": {
    ...
    "deploy": "gh-pages -d out -t true"
    ...
  },

After these changes, npm run static && npm run deploy should do what you're looking for.

Enriquetaenriquez

In 2024, using this as the deploy script seems to work gh-pages -d out --nojekyll --cname www.mywebsite.com – Avoirdupois

Thanks @JonášJančařík, this was the only thing that worked for me. – Pannonia