Solving “/_next/static/…/pages/***.js 404 Not Found”

November 21, 2019
By LoudNoises

So you are working on your Next.js app (either in development or production) and everything is seemingly going well, until you pop open your console and discover a message similar to this:

GET https://www.yoursite.com/_next/static/cRaZyRaNdOmStRiNg/pages/something.js net::ERR_ABORTED 404

Despite the error message detailing which file is missing, it is a fairly nebulous message, as it is not immediately obvious what needs to be done about it. And this is one of those errors that a lot of people seem to run in to, and have a hard time getting support for.

One option is to ask on the Next.js Spectrum channel, my personal favorite place to scream in to a vacant abyss, so completely void of any response that even an echo would seem like a welcome voice of support.

Fast forwarding here, and lots of research later, you’ll discover that the issue is that you did not create your <Link> 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>

What is going on in the second example is that href is telling the application which of your files in /pages to attempt to use to render this request, but to serve the URL as /articles/the-page. The first example makes the mistake of only including href, which basically says that the front-end URL shown to the browser should match exactly the name of the template in your /pages folder.

If that is the case in your application, you probably won’t run in to this issue. If you have a fairly large application, you likely will need to specify these attributes to handle routing and logic properly.

Coding up your <Link> components as shown in the second example should solve your issue in development, however to completely remove the issue in production I had to add this to my next.config.js file (supposedly you shouldn’t have to. In my case I had to):

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

See Link Next.js docs for more details.

Build, deploy, you should be good to go.