Solving "/_next/static/.../pages/***.js 404 Not Found"
![Paul Grieselhuber](/_next/image?url=https%3A%2F%2Fcms.rendr.io%2Fuploads%2Fpaul_grieselhuber_profile_0b1b798704.jpg&w=128&q=75)
Paul Grieselhuber
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.