Routes dynamiques

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

Un menu avec quarante plats ne nécessite pas quarante dossiers. Vous voulez que /menu/pizza, /menu/pasta et /menu/tiramisu soient la même page affichant des données différentes.

C'est ce que signifient les crochets dans un nom de dossier :

app/
    menu/
        [slug]/
            page.jsx     ->  /menu/pizza
                         ->  /menu/pasta
                         ->  /menu/anything-at-all

Un dossier normal correspond à son propre nom. Un dossier [bracketed] correspond à n'importe quel segment et se souvient de ce à quoi il a correspondu. Le mot à l'intérieur des crochets est le nom sous lequel vous le récupérerez : [slug] vous donne slug, [id] vous donne id.

Next transmet cette valeur à la page sous forme de prop appelée params :

// app/menu/[slug]/page.jsx
export default async function Dish({ params }) {
    const { slug } = await params;

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

Trois choses se produisent dans ce petit fichier :

La page prend une prop params. Chaque page en reçoit une, et pour une route dynamique, elle contient les segments correspondants.
params est une Promise dans Next 15, vous devez donc l'await. C'est pourquoi le composant est async. Le chapitre 5 explique pourquoi les pages ont le droit de l'être.
La déstructuration extrait slug, dont le nom provient directement du dossier [slug].

Visitez /menu/pasta et slug est "pasta". Un seul fichier, tous les plats.

Défi

Facile

Le dossier dynamique est déjà là : app/menu/[slug]/page.jsx répond à chaque URL sous /menu. Le problème est qu'il affiche pizza peu importe le plat demandé.

Rendez le composant async.
Lisez le segment correspondant avec const { slug } = await params;.
Affichez slug à l'intérieur de <h1 id="dish"> au lieu du texte codé en dur.

Les tests visitent deux plats différents et s'attendent à deux en-têtes différents.

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