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 correspond tout aussi volontiers à /menu/asdfgh, puis affiche une page de plat pour un plat qui n’existe pas.

Next.js vous offre les deux aspects de la solution.

1. L’écran 404. Un fichier nommé not-found.jsx, dans le même club des noms 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>;
}

Place-le dans app/not-found.jsx et il couvre toute l’application : toute URL qui ne correspond à rien arrive ici, plutôt que sur la page 404 intégrée standard.

2. Le déclencheur. Parfois, l’URL correspond à une route, mais les données n’existent pas. C’est le cas de /menu/asdfgh, et seul votre code peut le déterminer. 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 renvoie pas de valeur et vous ne le renvoyez pas : l’appeler arrête la page immédiatement et affiche le not-found.jsx le plus proche. Tout ce qui suit le if peut partir du principe que le plat existe réellement, c’est pourquoi la vérification se trouve au début.

Défi

Moyen

/menu/sushi affiche actuellement une page pour un dish qui ne figure pas dans le menu. Comble cette faille.

Complète le fichier app/not-found.jsx. Exporte par défaut un composant qui renvoie un <h1> avec id="not-found-title" et le texte exact Dish not found.
Dans app/menu/[slug]/page.jsx, importe notFound depuis next/navigation.
Si slug ne se trouve pas dans le tableau dishes, appelle notFound() avant tout rendu.

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