topLeft lightmiddlePinkLightrightPurpleLight

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

Paul Grieselhuber

Paul Grieselhuber

Nov 21, 2019

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.

Paul Grieselhuber

Paul Grieselhuber

Founder, President

Paul has extensive background in software development and product design. Currently he runs rendr.


Comments

    Book a discovery call with our product experts.

    Our team of web and mobile application experts look forward to discussing your next project with you.

    Book a call with us 👋