Benutzerdefinierte Fehlerseiten

404-Seite

Eine 404-Seite wird möglicherweise sehr häufig aufgerufen. Das serverseitige Rendern einer Fehlerseite bei jedem Aufruf erhöht die Last des Next.js-Servers. Dies kann zu höheren Kosten und langsameren Ladezeiten führen.

Um diese Probleme zu vermeiden, bietet Next.js standardmäßig eine statische 404-Seite, ohne dass zusätzliche Dateien erforderlich sind.

Anpassen der 404-Seite

Um eine benutzerdefinierte 404-Seite zu erstellen, können Sie eine Datei pages/404.js anlegen. Diese Datei wird statisch während des Builds generiert.

export default function Custom404() {
  return <h1>404 - Seite nicht gefunden</h1>
}

Wichtig: Sie können getStaticProps in dieser Seite verwenden, wenn Sie Daten während des Builds abrufen müssen.

500-Seite

Das serverseitige Rendern einer Fehlerseite bei jedem Aufruf erhöht die Komplexität der Fehlerbehandlung. Um Nutzern schnelle Reaktionen auf Fehler zu ermöglichen, bietet Next.js standardmäßig eine statische 500-Seite, ohne dass zusätzliche Dateien erforderlich sind.

Anpassen der 500-Seite

Um die 500-Seite anzupassen, können Sie eine Datei pages/500.js erstellen. Diese Datei wird statisch während des Builds generiert.

export default function Custom500() {
  return <h1>500 - Serverseitiger Fehler aufgetreten</h1>
}

Wichtig: Sie können getStaticProps in dieser Seite verwenden, wenn Sie Daten während des Builds abrufen müssen.

Erweiterte Anpassung von Fehlerseiten

500-Fehler werden sowohl client- als auch serverseitig durch die Error-Komponente behandelt. Wenn Sie diese überschreiben möchten, definieren Sie die Datei pages/_error.js und fügen Sie folgenden Code hinzu:

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `Ein ${statusCode}-Fehler ist auf dem Server aufgetreten`
        : 'Ein Fehler ist auf dem Client aufgetreten'}
    </p>
  )
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default Error

pages/_error.js wird nur in der Produktion verwendet. In der Entwicklung erhalten Sie einen Fehler mit dem Aufrufstack, um die Fehlerquelle zu identifizieren.

Wiederverwendung der integrierten Fehlerseite

Wenn Sie die integrierte Fehlerseite rendern möchten, können Sie die Error-Komponente importieren:

import Error from 'next/error'

export async function getServerSideProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const errorCode = res.ok ? false : res.status
  const json = await res.json()

  return {
    props: { errorCode, stars: json.stargazers_count },
  }
}

export default function Page({ errorCode, stars }) {
  if (errorCode) {
    return <Error statusCode={errorCode} />
  }

  return <div>Next stars: {stars}</div>
}

Die Error-Komponente akzeptiert auch title als Eigenschaft, wenn Sie eine Textnachricht zusammen mit dem statusCode übergeben möchten.

Wenn Sie eine benutzerdefinierte Error-Komponente haben, stellen Sie sicher, dass Sie diese importieren. next/error exportiert die standardmäßig von Next.js verwendete Komponente.

Einschränkungen

• Error unterstützt derzeit keine Next.js Data Fetching-Methoden wie getStaticProps oder getServerSideProps.
• _error ist, wie _app, ein reservierter Pfadname. _error wird verwendet, um das Layout und Verhalten von Fehlerseiten zu definieren. /_error rendert 404, wenn direkt über Routing oder in einem Custom Server aufgerufen.