Résoudre "/_next/static/.../pages/***.js 404 Not Found"

ous travaillez sur votre application Next.js (en développement ou en production) et tout semble aller pour le mieux, jusqu'à ce que vous ouvriez votre console et découvriez un message similaire à celui-ci :

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

Malgré le message d'erreur détaillant le fichier manquant, il s'agit d'un message assez nébuleux, car il n'est pas immédiatement évident de savoir ce qu'il faut faire à ce sujet. Il s'agit d'une de ces erreurs que beaucoup de personnes semblent rencontrer et pour lesquelles il est difficile d'obtenir de l'aide.

Une option est de demander sur le canal Next.js Spectrum channel, mon endroit préféré pour crier dans un abîme vide, tellement vide de toute réponse que même un écho semblerait être une voix de soutien bienvenue.

En avançant rapidement, et après de nombreuses recherches, vous découvrirez que le problème vient du fait que vous n'avez pas créé correctement vos composants <Link>.

Voici ce que vous avez probablement fait :

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

Voici ce que vous auriez dû faire :

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

Dans le deuxième exemple, href indique à l'application lesquels de vos fichiers se trouvent dans le dossier /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.

Si c'est le cas dans votre application, vous ne rencontrerez probablement pas ce problème. Si vous avez une application assez importante, vous devrez probablement spécifier ces attributs pour gérer correctement le routage et la logique.

Codage de votre fichier <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 (supposément, vous ne devriez pas avoir à . Dans mon cas, j'ai dû le faire) :

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

Voir la documentation de Link Next.js pour plus de détails.

Construisez, déployez, vous devriez être prêt à partir.