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 an, ohne dass zusätzliche Dateien erforderlich sind.

Anpassen der 404-Seite

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

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

Wissenswert: Sie können getStaticProps in dieser Seite verwenden, wenn Sie Daten beim Build abrufen müssen.

500-Seite

Das serverseitige Rendern einer Fehlerseite bei jedem Aufruf erhöht die Komplexität der Fehlerbehandlung. Um Nutzern möglichst schnell Rückmeldungen zu Fehlern zu geben, bietet Next.js standardmäßig eine statische 500-Seite an, ohne dass zusätzliche Dateien erforderlich sind.

Anpassen der 500-Seite

Um eine benutzerdefinierte 500-Seite zu erstellen, können Sie eine pages/500.js-Datei anlegen. Diese Datei wird statisch beim Build generiert.

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

Wissenswert: Sie können getStaticProps in dieser Seite verwenden, wenn Sie Daten beim Build abrufen müssen.

Erweiterte Anpassung der Fehlerseite

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 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 Produktion verwendet. In der Entwicklung erhalten Sie einen Fehler mit dem Aufrufstack, um den Ursprung des Fehlers 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 der Fehlerseiten zu definieren. /_error wird als 404 gerendert, wenn direkt über Routing aufgerufen oder in einem Custom Server gerendert.