Metadados da Página

Parte da seção Essenciais do Next.js do Journey de React da Coddy. Lição 14 de 47.

A aba do navegador, o favorito, o resultado do Google, a pré-visualização do link em um chat: todos eles leem as tags <title> e <meta> da página. Você nunca escreve essas tags manualmente no Next.js.

Em vez disso, uma página ou layout exporta um objeto chamado metadata:

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

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

O nome importa: deve ser exatamente metadata, exportado a partir do arquivo de rota. O Next.js lê isso enquanto renderiza e escreve o cabeçalho para você.

Os metadados são mesclados pela árvore abaixo, na mesma ordem de fora para dentro dos layouts: o layout raiz define os padrões, e qualquer página pode substituí-los. Uma página sem uma exportação de metadata simplesmente herda o que quer que o layout tenha definido, e é por isso que todas as páginas até agora foram chamadas depois do seu layout raiz.

Desafio

Iniciante

No momento, todas as abas do Coddy Eats exibem Coddy Eats, porque é isso que o layout raiz define. A página do menu merece um título próprio.

Em app/menu/page.jsx, acima do componente, exporte um objeto metadata.
Defina para ele um title exatamente como Our Menu.

Os testes leem o título do documento em /, depois navegam para /menu e o leem novamente.

Experimente você mesmo

import './globals.css';

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

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