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?

kangalio · Accepted Answer · 2024-02-14 10:13:08Z

50

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.

edited Feb 14, 2024 at 10:13

kangalio

6738 silver badges17 bronze badges

answered Oct 23, 2020 at 3:46

kas

1,1051 gold badge17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kas Over a year ago

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

Marco Antônio Over a year ago

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

KiddoV Jul 25 at 1:52

I think it doesn't work anymore

sbrk · Accepted Answer · 2021-11-12 12:10:37Z

14

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.

edited Nov 12, 2021 at 12:10

answered Nov 12, 2021 at 11:43

sbrk

1,5101 gold badge19 silver badges33 bronze badges

2 Comments

Jonáš Jančařík Over a year ago

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

Ícaro Lima Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related