Route dinamiche

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

Un menu con quaranta piatti non ha quaranta cartelle. Vuoi che /menu/pizza, /menu/pasta e /menu/tiramisu siano la stessa pagina che mostra dati diversi.

Ecco cosa significano le parentesi quadre in un nome di cartella:

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

Una cartella normale corrisponde al proprio nome. Una cartella [bracketed] corrisponde a qualsiasi segmento e ricorda a cosa ha corrisposto. La parola tra parentesi è il nome con cui potrai recuperarla: [slug] ti dà slug, [id] ti dà id.

Next passa quel valore alla pagina come prop chiamata params:

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

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

In quel piccolo file succedono tre cose:

La pagina riceve una prop params. Ogni pagina ne riceve una e, per una route dinamica, contiene i segmenti corrispondenti.
In Next 15, params è una Promise, quindi la metti in await. Ecco perché il componente è async. Il capitolo 5 spiega perché le pagine possono esserlo.
La destrutturazione estrae slug, il cui nome deriva direttamente dalla cartella [slug].

Visita /menu/pasta e slug è "pasta". Un file, ogni piatto.

Sfida

Facile

La cartella dinamica è già presente: app/menu/[slug]/page.jsx gestisce ogni URL sotto /menu. Il problema è che mostra pizza indipendentemente dal piatto richiesto.

Rendi il componente async.
Leggi il segmento corrispondente con const { slug } = await params;.
Visualizza slug all’interno di <h1 id="dish"> invece del testo codificato.

I test visitano due piatti diversi e si aspettano due intestazioni diverse.

Provalo tu

import './globals.css';

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

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