Metadatos dinámicos

Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 15 de 47.

Un objeto metadata es una constante, por lo que no puede ayudar a una ruta dinámica: app/dishes/[slug]/page.jsx sirve un plato diferente en cada URL, y cada uno necesita su propio título.

Para eso, exporta una función en su lugar:

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

Recibe los mismos params que recibe la página (una promesa, así que lo usas con await) y devuelve la misma estructura que tenía el objeto metadata. Usa uno u otro, nunca ambos en el mismo archivo.

Plantillas de título

Repetir el nombre del sitio en el título de cada página se vuelve molesto. Un layout puede transmitir un patrón en lugar de una cadena de texto simple:

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

default: el título para las páginas que no definen ninguno
template: el patrón para las páginas que sí lo hacen; su título se coloca donde está %s

Así que una página que devuelva title: 'Margherita' termina como Margherita | Coddy Eats en la pestaña, y la página principal, que no define nada, se queda como Coddy Eats. Escribe la marca una sola vez, en el layout.

Desafío

Intermedio

Cada página de platillo muestra actualmente Coddy Eats en la pestaña. Dale a cada una su propio título.

En app/dishes/[slug]/page.jsx, agrega una función async exportada llamada generateMetadata que:

Reciba { params } y lo espere con await para obtener slug
Devuelva { title: DISHES[slug].name }

app/layout.jsx ya contiene la plantilla '%s | Coddy Eats', por lo que /dishes/margherita debería terminar con el título Margherita | Coddy Eats. Échale un vistazo al layout: no necesitas cambiarlo.

Pruébalo tú mismo

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