Metadatos de la página

Parte de la sección Esenciales de Next.js del Journey de React de Coddy. Lección 14 de 47.

La pestaña del navegador, el marcador, el resultado de Google, la vista previa del enlace en un chat: todos ellos leen las etiquetas <title> y <meta> de la página. Nunca escribes esas etiquetas a mano en Next.js.

En su lugar, una página o diseño exporta un objeto llamado metadata:

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

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

El nombre importa: debe ser exactamente metadata, exportado desde el archivo de la ruta. Next.js lo lee durante la renderización y escribe la cabecera por ti.

Los metadatos se fusionan hacia abajo en el árbol, en el mismo orden de fuera hacia dentro que los layouts: el layout raíz establece los valores predeterminados y cualquier página puede sobrescribirlos. Una página sin una exportación de metadata simplemente hereda lo que haya establecido el layout, razón por la cual cada página hasta ahora ha recibido su nombre por el layout raíz.

Desafío

Principiante

Ahora mismo, todas las pestañas de Coddy Eats dicen Coddy Eats, porque eso es lo que establece el diseño raíz. La página del menú merece uno propio.

En app/menu/page.jsx, encima del componente, exporta un objeto metadata.
Asígnale un title exactamente igual a Our Menu.

Las pruebas leen el título del documento en /, después navegan a /menu y lo vuelven a leer.

Pruébalo tú mismo

import './globals.css';

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

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