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?

Answer 1

Add a .nojekyll file in the folder that contains the _next folder.

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

My _next folder is in the root of my repository, so I added a .nojekyll file to the root.

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.