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>Non trouvé</h2>
      <p>Ressource demandée introuvable</p>
      <Link href="/">Retour à l'accueil</Link>
    </div>
  )
}

import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h2>Non trouvé</h2>
      <p>Ressource demandée introuvable</p>
      <Link href="/">Retour à l'accueil</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 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.

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>Non trouvé : {data.name}</h2>
      <p>Ressource demandée introuvable</p>
      <p>
        Voir <Link href="/blog">tous les articles</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>Non trouvé : {data.name}</h2>
      <p>Ressource demandée introuvable</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

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