not-found.js

Die Datei not-found wird verwendet, um eine Benutzeroberfläche zu rendern, wenn die Funktion notFound innerhalb eines Routensegments aufgerufen wird. Zusätzlich zur Bereitstellung einer benutzerdefinierten Benutzeroberfläche gibt Next.js einen 200 HTTP-Statuscode für gestreamte Antworten und 404 für nicht gestreamte Antworten zurück.

import Link from 'next/link'
 
export default function NotFound() {
  return (
    <div>
      <h2>Nicht gefunden</h2>
      <p>Angeforderte Ressource konnte nicht gefunden werden</p>
      <Link href="/">Zurück zur Startseite</Link>
    </div>
  )
}

Hinweis: Zusätzlich zum Abfangen erwarteter notFound()-Fehler behandelt die Root-Datei app/not-found.js auch alle nicht übereinstimmenden URLs für Ihre gesamte Anwendung. Das bedeutet, Benutzer, die eine URL besuchen, die nicht von Ihrer App verarbeitet wird, sehen die Benutzeroberfläche, die von der Datei app/not-found.js exportiert wird.

Props

not-found.js-Komponenten akzeptieren keine Props.

Datenabruf

Standardmäßig ist not-found eine Server-Komponente. Sie können sie als async markieren, um Daten abzurufen und anzuzeigen:

import Link from 'next/link'
import { headers } from 'next/headers'
 
export default async function NotFound() {
  const headersList = await headers()
  const domain = headersList.get('host')
  const data = await getSiteData(domain)
  return (
    <div>
      <h2>Nicht gefunden: {data.name}</h2>
      <p>Angeforderte Ressource konnte nicht gefunden werden</p>
      <p>
        Zeige <Link href="/blog">alle Beiträge</Link>
      </p>
    </div>
  )
}

Wenn Sie Client-Komponenten-Hooks wie usePathname verwenden müssen, um Inhalte basierend auf dem Pfad anzuzeigen, müssen Sie Daten stattdessen auf der Clientseite abrufen.

Versionsverlauf