Solving "/_next/static/.../pages/***.js 404 Not Found"

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.