Getting 404 on static resources in production

[bmarshall511]

Brand new to Next & React so forgive me ahead of time. I created a very basic app here: https://github.com/Entermedia-LLC/best-practices

I'd like to deploy it using Github pages so did a static build using next build && next export. This all works great, so then push the static files to the gh-pages branch: https://github.com/Entermedia-LLC/best-practices/tree/gh-pages

But when you visit it (https://entermedia-llc.github.io/best-practices/), missing all the static resources. But if you look at the repo, they are there. Example being getting a 404 on for https://entermedia-llc.github.io/best-practices/_next/static/css/fec0287c56dc29bf.css, but that file exists (and looks correct) in the repo: https://github.com/Entermedia-LLC/best-practices/blob/gh-pages/_next/static/css/fec0287c56dc29bf.css

What's even weirder is when you try to visit that missing file directly: https://entermedia-llc.github.io/best-practices/_next/static/css/fec0287c56dc29bf.css, the output is a 404 page but also includes part of the app. Very strange because the file in the repo is pure CSS, not sure why it would be loading anything JS-wise.

[bmarshall511]

Figured it out, had to with how Github pages work. Basically need to add a .nojekyll file in the out folder to tell Git to serve the _next files. See https://stackoverflow.com/questions/61450307/js-and-css-not-loading-when-hosting-next-application-on-github-pages

[tkmpraveens]

For those who run npm run deploy directly instead of using yml file, here is the fix:

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "deploy": "npm run build && npm run export && touch ./out/.nojekyll && gh-pages -d out -t true"
  },

This will copy the .nojekyll file to the root folder and serve the static files.

[Ran-sy]

This worked for me after trying literally every other solution
I had to install npm install touch-cli in my file first

[allestaire]

On my case, I was putting many projects on github pages,
So the project is under on sub folder, to make it work, you have to add .nojekyll on root folder still

[Kamlesh0007]

Figured it out, had to with how Github pages work. Basically need to add a .nojekyll file in the out folder to tell Git to serve the _next files. See https://stackoverflow.com/questions/61450307/js-and-css-not-loading-when-hosting-next-application-on-github-pages

[jingjiezhou2021]

If you are producing standalone server and GET _next/static/xxx gives 404 Not Found, remember next.js doesn't copy traced files into the standalone server as pointed out by the docs