Risolvere "/_next/static/.../pages/***.js 404 Non Trovato".

o state lavorando alla vostra applicazione Next.js (in sviluppo o in produzione) e tutto sembra andare bene, finché non aprite la console e scoprite un messaggio simile a questo:

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

Nonostante il messaggio di errore specifichi quale sia il file mancante, si tratta di un messaggio piuttosto nebuloso, in quanto non è immediatamente evidente cosa si debba fare. Questo è uno di quegli errori in cui molti si imbattono e per i quali è difficile ottenere assistenza.

Una possibilità è quella di chiedere al canale Next.js Spectrum, il mio posto preferito per urlare in un abisso vuoto, così completamente privo di risposte che anche un'eco sembrerebbe una gradita voce di supporto.

Dopo aver fatto un po' di ricerche, scoprirete che il problema è che non avete creato correttamente i vostri componenti <Link>.

Ecco cosa probabilmente avete fatto:

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

Ecco cosa avreste dovuto fare:

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

Nel secondo esempio, href indica all'applicazione quali file si trovano nella cartella /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.

Se questo è il caso della vostra applicazione, probabilmente non incontrerete questo problema. Se si dispone di un'applicazione piuttosto grande, probabilmente sarà necessario specificare questi attributi per gestire correttamente l'instradamento e la logica.

Codificare il file <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 ( in teoria non dovrebbe essere necessario. Nel mio caso l'ho dovuto fare):

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

Vedere il documento Next.js per maggiori dettagli.

Costruite, distribuite e dovreste essere pronti a partire.