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 à votre page le segment d’URL via params. Dans Next 15, il y a un point important à retenir :

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 simplement vide, ou remplie de solutions de repli, et vous cherchez un bug 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 sont uniquement disponibles dans les composants serveur async, ce qui constitue une raison de plus pour laquelle la page que vous venez d’écrire devait être asynchrone.

Pourquoi utiliser des promesses ? Pour que Next.js puisse commencer à afficher les parties de votre page qui ne dépendent pas de l’URL avant d’avoir fini de déterminer 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>
    );
}