"/_next/static/.../pages/***.js 404 niet gevonden" oplossen

o je werkt aan je Next.js app (in ontwikkeling of productie) en alles lijkt goed te gaan, totdat je je console opent en een bericht ontdekt dat lijkt op dit:

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

Ondanks de foutmelding die aangeeft welk bestand ontbreekt, is het een vrij vage melding, omdat het niet meteen duidelijk is wat eraan gedaan moet worden. En dit is een van die fouten waar veel mensen tegenaan lopen en waar ze moeilijk ondersteuning voor kunnen krijgen.

Een optie is om het te vragen op het Next.js Spectrum channel, mijn persoonlijke favoriete plek om te schreeuwen in een lege afgrond, zo compleet leeg van enige reactie dat zelfs een echo een welkome stem van ondersteuning zou lijken.

Als je hier snel verder gaat en veel onderzoek doet, zul je ontdekken dat het probleem is dat je je <Link> componenten niet goed hebt gemaakt.

Dit is wat je waarschijnlijk hebt gedaan:

<Link href={`/articles/${uri}`}>
  <a>Some text</a>
</Link>

Dit is wat je had moeten doen:

<Link href={`/something-else?uri=${uri}`} as={`/articles/${uri}`}>
  <a>Some text</a>
</Link>

Wat er gebeurt in het tweede voorbeeld is dat href de applicatie vertelt welke van je bestanden in de map /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 staan.

Als dat het geval is in je applicatie, zul je dit probleem waarschijnlijk niet tegenkomen. Als je een vrij grote applicatie hebt, zul je waarschijnlijk deze attributen moeten specificeren om routing en logica goed af te handelen.

Het coderen van je <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 bestand ( zou je niet hoeven te. In mijn geval moest ik het wel):

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

Zie Link Next.js docs voor meer details.

Bouwen, implementeren, je zou er klaar voor moeten zijn.