Metadados Dinâmicos

Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 15 de 47.

Um objeto metadata é uma constante, portanto não pode ajudar uma rota dinâmica: app/dishes/[slug]/page.jsx serve um dish diferente em cada URL, e cada um precisa de seu próprio title.

Para isso, exporte uma função em vez disso:

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

Ele recebe os mesmos params que a página recebe (uma promise, então você faz o await dela) e retorna o mesmo formato que o objeto metadata tinha. Use um ou outro, nunca ambos no mesmo arquivo.

Templates de título

Repetir o nome do site no título de todas as páginas fica cansativo. Um layout pode transmitir um padrão em vez de uma simples string:

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

default: o título para páginas que não definem nenhum
template: o padrão para páginas que definem; o título delas é inserido onde %s está

Assim, uma página que retorna title: 'Margherita' acaba como Margherita | Coddy Eats na aba, e a página inicial, que não define nada, permanece Coddy Eats. Escreva a marca uma vez, no layout.

Desafio

Médio

Cada página de prato atualmente mostra Coddy Eats na aba. Dê a cada uma o seu próprio título.

Em app/dishes/[slug]/page.jsx, adicione uma função async exportada chamada generateMetadata que:

Recebe { params } e o aguarda (com await) para obter slug
Retorna { title: DISHES[slug].name }

O arquivo app/layout.jsx já possui o template '%s | Coddy Eats', então /dishes/margherita deve ficar com o título Margherita | Coddy Eats. Dê uma olhada no layout: você não precisa alterá-lo.

Experimente você mesmo

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