Metadati della pagina

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

La scheda del browser, il segnalibro, il risultato di Google, l’anteprima del link in una chat: leggono tutti i tag <title> e <meta> della pagina. In Next.js non scrivi mai quei tag a mano.

Invece, una pagina o un layout esporta un oggetto chiamato metadata:

// app/menu/page.jsx
export const metadata = {
    title: 'Our Menu',
    description: 'Everything we cook.',
};

export default function Menu() {
    return <h1>Our Menu</h1>;
}

Il nome è importante: deve essere esattamente metadata, esportato dal file della route. Next.js lo legge durante il rendering e genera l'head per te.

I metadati si propagano verso il basso nell’albero, nello stesso ordine dall’esterno verso l’interno dei layout: il layout radice imposta i valori predefiniti e qualsiasi pagina può sovrascriverli. Una pagina senza un’esportazione metadata eredita semplicemente ciò che ha impostato il layout, ed è per questo che finora ogni pagina è stata chiamata dopo il layout radice.

Sfida

Principiante

Al momento ogni scheda di Coddy Eats dice Coddy Eats, perché è ciò che imposta il layout principale. La pagina del menu merita un titolo tutto suo.

In app/menu/page.jsx, sopra il componente, esporta un oggetto metadata.
Assegnagli un title esattamente uguale a Our Menu.

I test leggono il titolo del documento su /, poi navigano a /menu e lo leggono di nuovo.

Provalo tu

import './globals.css';

export const metadata = {
    title: 'Coddy Eats',
};

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