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: ```sh 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](https://spectrum.chat/next-js), 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 `` components properly. Here is what you probably did: ```jsx Some text ``` Here is what you should have done: ```jsx Some text ``` 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 `` 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](https://spectrum.chat/next-js/general/next-static-pages-js-404-not-found-build-issue~de17fd85-fd62-47e2-a324-93abd35f6837?m=MTU1Mzk0MjY4NjIzMQ==). In my case I had to): ```js 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](https://nextjs.org/docs#with-link) docs for more details. Build, deploy, you should be good to go.