Metadati dinamici

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

Un oggetto metadata è una costante, quindi non può essere d'aiuto per una route dinamica: app/dishes/[slug]/page.jsx mostra un piatto diverso per ogni URL, e ognuno ha bisogno del proprio titolo.

Per farlo, esporta invece una funzione:

export async function generateMetadata({ params }) {
    const { slug } = await params;
    return { title: DISHES[slug].name };
}

Riceve gli stessi params della pagina (una promise, quindi la metti in await) e restituisce la stessa struttura che aveva l’oggetto metadata. Usa l’uno o l’altro, mai entrambi nello stesso file.

Modelli di titolo

Ripetere il nome del sito nel titolo di ogni pagina alla lunga stanca. Invece di una semplice stringa, un layout può trasmettere uno schema:

// app/layout.jsx
export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

default: il titolo per le pagine che non ne impostano uno
template: lo schema per le pagine che lo impostano; il loro titolo viene inserito al posto di %s

Quindi una pagina che restituisce title: 'Margherita' finisce come Margherita | Coddy Eats nella scheda, mentre la home page, che non imposta nulla, rimane Coddy Eats. Scrivi il nome del brand una sola volta, nel layout.

Sfida

Medio

Ogni pagina di un piatto mostra attualmente Coddy Eats nella scheda. Assegna a ciascuna il proprio titolo.

In app/dishes/[slug]/page.jsx, aggiungi una funzione async esportata chiamata generateMetadata che:

Riceva { params } e la attenda per ottenere slug
Restituisca { title: DISHES[slug].name }

app/layout.jsx include già il template '%s | Coddy Eats', quindi /dishes/margherita dovrebbe avere il titolo Margherita | Coddy Eats. Dai un'occhiata al layout: non devi modificarlo.

Provalo tu

import './globals.css';

export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

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