Pages non trouvées

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 9 sur 47.

Une route dynamique est généreuse à l'excès. app/menu/[slug]/page.jsx correspond à /menu/pizza, et elle correspond tout aussi bien à /menu/asdfgh, puis affiche une page dish pour un dish qui n'existe pas.

Next.js vous offre les deux moitiés de la solution.

1. L'écran 404. Un fichier nommé not-found.jsx, faisant partie du même club de fichiers spéciaux que page.jsx et layout.jsx :

// app/not-found.jsx
export default function NotFound() {
    return <h1>We don't have that</h1>;
}

Placez-le dans app/not-found.jsx et il couvrira toute l'application : chaque URL qui ne correspond à rien arrivera ici, au lieu de la page 404 intégrée par défaut.

2. Le déclencheur. Parfois, l'URL correspond à une route mais la donnée n'existe pas. C'est le cas de /menu/asdfgh, et seul votre code peut le savoir. Appelez notFound() :

import { notFound } from 'next/navigation';

const dishes = ['pizza', 'pasta'];

export default async function Dish({ params }) {
    const { slug } = await params;

    if (!dishes.includes(slug)) {
        notFound();
    }

    return <h1>{slug}</h1>;
}

notFound() ne retourne pas de valeur et vous ne la retournez pas non plus : l'appeler arrête la page directement à cet endroit et affiche le not-found.jsx le plus proche. Tout ce qui se trouve après le if peut supposer en toute sécurité que le plat existe, c'est pourquoi la garde se place au début.

Défi

Moyen

/menu/sushi rend actuellement une page de plat pour un plat qui n'est pas au menu. Comblez cette lacune.

Créez app/not-found.jsx. Exportez par défaut (export default) un composant qui renvoie un <h1> avec id="not-found-title" et le texte exact Dish not found.
Dans app/menu/[slug]/page.jsx, importez notFound depuis next/navigation.
Si slug n'est pas dans le tableau dishes, appelez notFound() avant de rendre quoi que ce soit.

/menu/pizza doit toujours fonctionner.

Essayez vous-même

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}