Menu

Benutzerdefinierte Fehler

404-Seite

Auf eine 404-Seite wird möglicherweise sehr häufig zugegriffen. Das serverseitige Rendering einer Fehlerseite bei jedem Besuch erhöht die Serverlast von Next.js. Dies kann zu höheren Kosten und langsameren Erfahrungen führen.

Um diese Nachteile zu vermeiden, bietet Next.js standardmäßig eine statische 404-Seite, ohne dass zusätzliche Dateien hinzugefügt werden müssen.

404-Seite anpassen

Um eine benutzerdefinierte 404-Seite zu erstellen, können Sie eine pages/404.js-Datei anlegen. Diese Datei wird zur Bauzeit statisch generiert.

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

Hinweis: Sie können getStaticProps innerhalb dieser Seite verwenden, wenn Sie Daten zur Bauzeit abrufen müssen.

500-Seite

Das serverseitige Rendering einer Fehlerseite bei jedem Besuch erhöht die Komplexität bei der Fehlerbehandlung. Um Benutzern schnellstmöglich Antworten auf Fehler zu geben, bietet Next.js standardmäßig eine statische 500-Seite, ohne dass zusätzliche Dateien hinzugefügt werden müssen.

500-Seite anpassen

Um die 500-Seite anzupassen, können Sie eine pages/500.js-Datei erstellen. Diese Datei wird zur Bauzeit statisch generiert.

pages/500.js
export default function Custom500() {
  return <h1>500 - Serverfehler aufgetreten</h1>
}

Hinweis: Sie können getStaticProps innerhalb dieser Seite verwenden, wenn Sie Daten zur Bauzeit abrufen müssen.

Erweiterte Fehlerseiten-Anpassung

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

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `Ein Fehler ${statusCode} 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 Produktionsumgebung verwendet. In der Entwicklungsumgebung erhalten Sie einen Fehler mit der Aufrufstapel, um zu erkennen, woher der Fehler stammt.

Die integrierte Fehlerseite wiederverwenden

Wenn Sie die integrierte Fehlerseite rendern möchten, können Sie dies durch Importieren der Error-Komponente:

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 eine title-Eigenschaft, wenn Sie zusätzlich zur statusCode eine Textnachricht übergeben möchten.

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

Vorbehalte