Lösung für "/_next/static/.../pages/***.js 404 Not Found"

ie arbeiten an Ihrer Next.js-Anwendung (entweder in der Entwicklung oder in der Produktion) und alles scheint gut zu laufen, bis Sie Ihre Konsole öffnen und eine Meldung ähnlich der folgenden entdecken:

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

Trotz der Fehlermeldung, die genau angibt, welche Datei fehlt, ist es eine ziemlich nebulöse Meldung, da nicht sofort klar ist, was zu tun ist. Und dies ist einer der Fehler, mit denen viele Leute konfrontiert werden und für die es schwierig ist, Unterstützung zu bekommen.

Eine Möglichkeit ist, im Next.js Spectrum-Kanal zu fragen, meinem persönlichen Lieblingsort, um in einen leeren Abgrund zu schreien, der so leer ist, dass selbst ein Echo wie eine willkommene Stimme der Unterstützung erscheint.

Wenn Sie hier weitermachen und viel recherchieren, werden Sie feststellen, dass das Problem darin besteht, dass Sie Ihre <Link> Komponenten nicht richtig erstellt haben.

Das haben Sie wahrscheinlich getan:

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

Das hätten Sie tun sollen:

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

Was im zweiten Beispiel vor sich geht, ist, dass href der Anwendung mitteilt, welche Ihrer Dateien sich im Ordner /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 befinden.

Wenn das in Ihrer Anwendung der Fall ist, werden Sie wahrscheinlich nicht auf dieses Problem stoßen. Wenn Sie eine ziemlich große Anwendung haben, müssen Sie wahrscheinlich diese Attribute angeben, um Routing und Logik richtig zu handhaben.

Kodieren Sie Ihre <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 Datei (sollten Sie nicht müssen. In meinem Fall musste ich es):

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

Siehe Link Next.js docs für weitere Details.

Erstellen, bereitstellen, und Sie sollten bereit sein.