not-found.js

Die not-found-Datei wird verwendet, um die Benutzeroberfläche (UI) zu rendern, wenn die notFound-Funktion innerhalb eines Routen-Segments aufgerufen wird. Neben der Anzeige einer benutzerdefinierten UI 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>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

Gut zu wissen: Zusätzlich zum Abfangen von erwarteten notFound()-Fehlern verarbeitet die Root-Datei app/not-found.js 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 UI sehen, die von der app/not-found.js-Datei exportiert wird.

Props

not-found.js-Komponenten akzeptieren keine Props.

Datenabfrage

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 = headers()
  const domain = headersList.get('host')
  const data = await getSiteData(domain)
  return (
    <div>
      <h2>Not Found: {data.name}</h2>
      <p>Could not find requested resource</p>
      <p>
        View <Link href="/blog">all posts</Link>
      </p>
    </div>
  )
}

import Link from 'next/link'
import { headers } from 'next/headers'

export default async function NotFound() {
  const headersList = headers()
  const domain = headersList.get('host')
  const data = await getSiteData(domain)
  return (
    <div>
      <h2>Not Found: {data.name}</h2>
      <p>Could not find requested resource</p>
      <p>
        View <Link href="/blog">all posts</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

Version	Änderungen
`v13.3.0`	Root `app/not-found` verarbeitet globale nicht übereinstimmende URLs.
`v13.0.0`	`not-found` eingeführt.

Props

Datenabfrage

Versionsverlauf

On this page