In attesa dei parametri della route

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 24 di 47.

Una route dinamica passa alla tua pagina il segmento dell'URL tramite params. In Next 15 c'è una particolarità da ricordare:

params è una promessa.

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

Dimentica await e non si blocca nulla: è proprio questo che lo rende insidioso. Destrutturare una promise ti restituisce semplicemente undefined:

const { slug } = params;   // undefined
const dish = await getDish(slug);   // non trova nulla

La pagina continua a essere visualizzata. È solo vuota, o piena di contenuti di ripiego, e ti metti a cercare un bug nel tuo livello dati che non è mai esistito.

La stessa regola si applica a searchParams. Entrambi sono promise, entrambi devono essere attesi ed entrambi sono disponibili solo nei componenti server async, un altro motivo per cui la pagina che hai appena scritto doveva essere asincrona.

Perché usare le promise? Così Next.js può iniziare a renderizzare le parti della tua pagina che non dipendono dall'URL prima di aver finito di determinare quelle che invece ne dipendono.

Sfida

Facile

app/menu/[slug]/page.jsx è quasi corretto, ma non attende mai params, quindi ogni piatto viene restituito come Unknown dish.

Attendi params prima di destrutturarlo: const { slug } = await params;

lib/data.js e la pagina iniziale sono bloccati. Visitando /menu/carbonara deve essere visualizzato Carbonara in #dish-name e il suo prezzo in #dish-price.

Provalo tu

import './globals.css';

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

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