not-found.js

Le fichier not-found est utilisé pour afficher une interface utilisateur lorsque la fonction notFound est appelée dans un segment de route. En plus de servir une interface personnalisée, Next.js renverra un code de statut HTTP 200 pour les réponses en flux (streamed) et 404 pour les réponses non streamées.

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>
  )
}

Bon à savoir : En plus d'intercepter les erreurs notFound() attendues, le fichier racine app/not-found.js gère également toutes les URL non correspondantes pour l'ensemble de votre application. Cela signifie que les utilisateurs qui visitent une URL non gérée par votre application verront l'interface exportée par le fichier app/not-found.js.

Props

Les composants not-found.js n'acceptent aucune prop.

Récupération de données

Par défaut, not-found est un composant serveur (Server Component). Vous pouvez le marquer comme async pour récupérer et afficher des données :

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>
  )
}

Historique des versions

Version	Modifications
`v13.3.0`	Le fichier racine `app/not-found` gère les URL globales non correspondantes.
`v13.0.0`	Introduction de `not-found`.

Props

Récupération de données

Historique des versions

On this page