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 d'état HTTP 200 pour les réponses streamées et 404 pour les réponses non streamées.

import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h2>Non trouvé</h2>
      <p>Impossible de trouver la ressource demandée</p>
      <Link href="/">Retour à l'accueil</Link>
    </div>
  )
}

Référence

Props

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

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 votre application entière. Cela signifie que les utilisateurs visitant une URL non gérée par votre application verront l'interface exportée par le fichier app/not-found.js.

Exemples

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 = await headers()
  const domain = headersList.get('host')
  const data = await getSiteData(domain)
  return (
    <div>
      <h2>Non trouvé : {data.name}</h2>
      <p>Impossible de trouver la ressource demandée</p>
      <p>
        Voir <Link href="/blog">tous les articles</Link>
      </p>
    </div>
  )
}

Si vous avez besoin d'utiliser des hooks de composant client comme usePathname pour afficher du contenu basé sur le chemin, vous devez plutôt récupérer les données côté client.

Historique des versions