Next.js Error Getting 404 When Fetching JS Resources After Refresh

Ran into similar problem with inherited code, search a million times this was the top result. My answer for all other frustrated dev out there, check your Link and your router.push() especially if you are using a custom router. The Link and router.push() should be pointing to the server URL. You can pass as to mask the URL for the browser.

Solved by removing assetPrefix: "." from next.config.js file.

This setting makes the assets path based on the current pages instead of the bath path url.

ie:

instead of: test.com/_next/file.js

it will be: test.com/page/_next/file.js

which obviously does not exist on that.

Try removing the node_modules and .next folders. After that, install all the node modules and run it / build it.

npm update

has resolved my issue.

This error comes from Node module not updated version to package.json updated version mismatch.

In our case we fixed it by skipping the next.js router for handling the URL:

  <Link
    onClick={() => {
      const url = '/path/to/url';
      Router.events.emit("routeChangeStart", url);
      window.location.href = url;
    }}
  >

I had the same issue but with npm run build on a React + Next JS template purchased from themeforest. It was because of the Next.js router, <Link> set up. This article helped me to fix the issue.

https://www.loudnoises.us/solving-next-static-pages-js-404-not-found/

The summary of the article is:

You’ll discover that the issue is that you did not create your components properly.

Here is what you probably did:

<Link
  href={`/articles/${uri}`}
>
  <a>
    Some text
  </a>
</Link>

Here is what you should have done:

<Link
  href={`/something-else?uri=${uri}`}
  as={`/articles/${uri}`}
>
  <a>
    Some text
  </a>
</Link>

For larger applications, add this to your next.config.js file

module.exports = {
  ...
  distDir: "_next",
  generateBuildId: async () => {
    if (process.env.BUILD_ID) {
      return process.env.BUILD_ID;
    } else {
      return `${new Date().getTime()}`;
    }
  },
  ...
}

Troubleshooting -

1. stop your node process / server / pm2 Test if you can still access the website.

2. if you run htop - you can filter for node - and you may be surprised to see a lingering node process running on same port.

Possible solution is to add the following line in next.config.js file according to NextJS doc:

module.exports {
  assetPrefix: process.env.NODE_ENV === "production" ? "/about/" : undefined,
}

Assuming /about/ is your replacement page or a domain your trying to add as a prefix.

ref: https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix

If you use generateBuildId in your next.config.js, make sure that it bumped to a new version. It may cause the issue on the browser.

In my case, it was the cloud provider which had caching mechanism which resulted in caching the previous build's js assets. cleared the cloud's cache and it works.

I was having this same issue where some assets (CSS, JS, build manifest, etc.) would randomly 404 when I refreshed, and realized that the reason was because my environment was using load balancers.

I found a solution here and added that to the generateBuildId option to my next.config.js as noted here.

Basically, you need to create a random unique ID for each build that gets returned from the function you pass to generateBuildId so that the the static assets only serve from one node instead of multiple.

In the next.config.js, I passed a function that read the Git SHA from an environment variable (i.e. I added a GIT_SHA value to process.env) that I set during a build step:

generateBuildId: () => {
  return process.env.GIT_SHA || '';
}

How you get and set that SHA is entirely up to you. The resources I linked off to above have some suggestions.

verify if you don't have two same folder named app or you don't have app and src folder in the root

I'm using a ec2 instance and my problem was that two node process was running in the same port. The first that should be the main, a pm2 node, wasn't actually the process that my website was. So i stoped him to be sure, with pm2 stop PID. After that, server in port 3000 was still runing because was not anymore pm2, but a node process. You have to stop the node process and start pm2 again after those steps below:

In the processes, search for node to see if its keep runing

ps aux | grep node

Get that pid that will be showed

lsof -i :3000

Then kill that process

kill -9 PID

At the end, you should be able to start your pm2 again.

pm2 list | pm2 start PID

Thank you johndpope, you confirmed my problem.

On production I have same problem. After many hours research I found this topic iis return 404 when url has [] cause next.js dynamic routes chunk load error Then I think On cloudflare I have set minimum tls version to 1.2 But when I get back to minimum tls to 1.0 version on cloudflare problem fixed.

https://stackoverflow.com/a/77450497/20358783 And I added to web config some code

webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    if (!isServer) {
      config.output.filename = 'static/chunks/[name].js';
      config.output.chunkFilename = 'static/chunks/[name].js';
    }
    return config;
  }

I tried to remove assetPrefix: "." from next.config.js file, and works!

Check here in which case you should use the assetPrefix: https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix

My middleware was running on my static assets. I needed to add the following to my middleware.ts file:

export const config = {
  matcher: [
    '/((?!_next/static|_next/image|favicon.ico|api).*)',
  ],
};