Attendre les paramètres de route

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

Une route dynamique transmet le segment d'URL à votre page via params. Dans Next 15, il y a un piège qui vaut la peine d'être mémorisé :

params est une promesse.

// app/menu/[slug]/page.jsx
export default async function DishPage({ params }) {
    const { slug } = await params;
    // /menu/carbonara  ->  slug === 'carbonara'
}

Oubliez le await et rien ne plante, ce qui rend la chose particulièrement sournoise. Déstructurer une promesse vous donne simplement undefined :

const { slug } = params;   // undefined
const dish = await getDish(slug);   // ne trouve rien

La page s'affiche toujours. Elle est juste vide, ou remplie de valeurs de repli, et vous partez à la recherche d'un bogue dans votre couche de données qui n'a jamais existé.

La même règle s'applique à searchParams. Les deux sont des promesses, les deux doivent être attendues, et les deux ne sont disponibles que pour les composants serveur async, une raison de plus pour laquelle la page que vous venez d'écrire devait être async.

Pourquoi des promesses ? Pour que Next.js puisse commencer à rendre les parties de votre page qui ne dépendent pas de l'URL avant d'avoir fini de traiter celles qui en dépendent.

Défi

Facile

app/menu/[slug]/page.jsx est presque correct, mais il ne fait jamais await sur params, donc chaque plat revient comme Unknown dish.

Faites un await sur params avant la déstructuration : const { slug } = await params;

lib/data.js et la page d'accueil sont verrouillés. Visiter /menu/carbonara doit afficher Carbonara dans #dish-name et son prix dans #dish-price.

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