not-found.js

Die not-found-Datei wird verwendet, um die Benutzeroberfläche zu rendern, wenn die notFound-Funktion innerhalb eines Routen-Segments aufgerufen wird. Neben der Bereitstellung einer benutzerdefinierten Oberflä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>Die angeforderte Ressource konnte nicht gefunden werden</p>
      <Link href="/">Zur Startseite zurückkehren</Link>
    </div>
  )
}

Referenz

Props

not-found.js-Komponenten akzeptieren keine Props.

Gut zu wissen: Zusätzlich zum Abfangen von erwarteten notFound()-Fehlern verarbeitet die root app/not-found.js-Datei auch alle nicht übereinstimmenden URLs für Ihre gesamte Anwendung. Das bedeutet, dass Benutzer, die eine URL aufrufen, die von Ihrer App nicht verarbeitet wird, die von der app/not-found.js-Datei exportierte Benutzeroberfläche sehen.

Beispiele

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>Die angeforderte Ressource konnte nicht gefunden werden</p>
      <p>
        Alle <Link href="/blog">Beiträge anzeigen</Link>
      </p>
    </div>
  )
}

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

Versionsverlauf