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

En este momento, cada pestaña de Coddy Eats dice Coddy Eats, porque eso es lo que establece el layout raíz. La página del menú merece el suyo propio.

En app/menu/page.jsx, arriba del componente, exporta un objeto metadata.
Dale un title que sea exactamente Our Menu.

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

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>
    );
}