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

Question

I'm running a Next.js dev server. When I go to page #1, then click a link to page #2, it works great. (Just to clarify, I'm not using the as prop of Next's <Link> tag, just the regular old href.)

However, if I then refresh page #2, the page itself loads, as do all the images ... but all of the Javascript files fail with a 404:

http://localhost:3000/page2/_next/static/chunks/main.js?ts=1612664646023 net::ERR_ABORTED 404 (Not Found) 2localhost/:196 GET

http://localhost:3000/page2/_next/static/development/_buildManifest.js?ts=1612664646023 net::ERR_ABORTED 404 (Not Found) 2localhost/:1 GET

http://localhost:3000/page2/_next/static/chunks/webpack.js?ts=1612664646023 net::ERR_ABORTED 404 (Not Found) 7localhost/:196 GET

http://localhost:3000/page2/_next/static/chunks/main.js?ts=1612664646023 net::ERR_ABORTED 404 (Not Found)

Does anyone know what I can do to fix this?

Answer 1

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.

Answer 2

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;
    }}
  >