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 aburrido. Un diseño puede transmitir un patrón en lugar de una cadena 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 establecen ninguno
template: el patrón para las páginas que sí lo establecen; su título se coloca donde está %s

Así, una página que devuelve title: 'Margherita' termina mostrando Margherita | Coddy Eats en la pestaña, y la página de inicio, que no establece nada, mantiene Coddy Eats. Escribe la marca una vez, en el diseño.

Desafío

Intermedio

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

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

Reciba { params } y espere su resolución para obtener slug
Devuelva { title: DISHES[slug].name }

app/layout.jsx ya incluye la plantilla '%s | Coddy Eats', por lo que /dishes/margherita debería terminar con el título Margherita | Coddy Eats. Echa un vistazo al diseño: 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>
    );
}