Use os exemplos como laboratório: leia o código, preveja o resultado e teste no ambiente de prática. Para guardar uma ideia, selecione qualquer trecho.
CAPÍTULO 31 DE 48
Metadata estática e dinâmica
Neste capítulo, você transforma objeto Metadata em uma decisão de engenharia full-stack que pode ser explicada, testada e revisada. Você sairá com uma implementação pequena, evidências de teste e um critério reutilizável nos projetos seguintes.
Escrita, marcações e comentários ficam só neste navegador, separados por capítulo e sem sincronização com a conta. Evite informações sensíveis; limpar os dados do navegador pode remover seus registros.
As seis questões têm correção comentada. Laboratório e projeto são práticas livres, sem execução automática de código.
Prepare-se — O que você vai construir
- Explicar objeto Metadata sem depender de uma receita decorada.
- Relacionar generateMetadata ao contrato e ao fluxo observável.
- Aplicar herança de metadados em um caso real e em um limite.
Se precisar de apoio, consulte a capítulo anterior e volte a estas tarefas. Não há obrigação de seguir um prazo.
Entenda — Modelo mental e estrutura
1. Comece pelo modelo mental
Metadata pode ser exportada estaticamente ou gerada com params e dados. Título, descrição, canonical e imagens devem representar a rota, sem consultas duplicadas desnecessárias. Em objeto Metadata, a sintaxe é apenas a superfície de um contrato. Relacione essa ideia a generateMetadata e herança de metadados antes de editar o exemplo. Em software real, uma linha pode compilar e ainda representar uma suposição incorreta sobre dados, tempo, ambiente ou responsabilidade. Por isso, descreva a entrada, a transformação e o resultado observável com palavras simples.
Descreva primeiro o contrato de objeto Metadata e como ele se relaciona com generateMetadata. Implemente a menor versão que revele o mecanismo e mantenha o caminho principal fácil de seguir. Se a solução depende de estado implícito, conversão silenciosa ou ordem acidental, registre essa dependência e procure torná-la explícita. O objetivo não é memorizar uma receita: é reconhecer quando o conceito se aplica, escolher uma abstração proporcional e conseguir explicar o custo dessa escolha.
2. Leia o código como uma sequência de decisões
export const metadata: Metadata = { title: 'Catálogo', description: 'Produtos autorais.' };
Leia o exemplo de fora para dentro. Primeiro localize os dados e o contrato público; depois acompanhe as transformações; por fim, identifique efeitos, falhas e saídas. O trecho deixa objeto Metadata visível no código e permite evoluir herança de metadados sem esconder o fluxo principal. Digite o trecho em vez de apenas copiá-lo. Troque nomes e valores, faça uma hipótese e execute novamente. Essa comparação mostra o que pertence à regra da linguagem ou do framework e o que existe apenas por causa do exemplo.
Observe também o que o código não garante. Next.js organiza renderização, rotas, dados e entrega; React descreve a interface; autorização e integridade permanecem responsabilidades explícitas do código de servidor. Um tipo estático não valida automaticamente uma resposta externa; um componente não substitui semântica; uma abstração não corrige um contrato mal definido. Comentários úteis registram intenção, limite ou motivo. Comentários que repetem a sintaxe não compensam nomes vagos ou responsabilidades misturadas.
3. Converta observação em critério verificável
Uma solução forte torna objeto Metadata legível, verifica generateMetadata com evidência e registra os limites de herança de metadados. Um bom critério descreve contexto, ação e resultado. Em vez de “funcionou”, registre qual entrada foi usada, qual saída era esperada e como uma falha deveria aparecer. Inspecione valores, mensagens e transições no Next.js 16.3.4, React 19.2, TypeScript e navegador. Quando houver interface, percorra também com teclado, zoom e tecnologia assistiva; quando houver servidor ou compilação, confira logs, tipos e limites de confiança.
A armadilha central é: transportar uma convenção antiga ou marcar tudo como cliente para contornar o contrato de objeto Metadata.. Corrija a causa antes de empilhar exceções. Reduza o caso, reproduza o problema, altere uma variável por vez e repita o teste. Ao terminar, você deve conseguir dizer por que a solução funciona, quais suposições preserva, onde pode falhar e que evidência outra pessoa pode usar para revisar a entrega.
Analise — Código em contexto
Uma revisão começa pela intenção. Para “Metadata estática e dinâmica”, o requisito é: a solução deve demonstrar objeto Metadata, preservar generateMetadata e reagir de forma previsível quando herança de metadados variar. Analise a variação abaixo e preveja o resultado antes de executá-la.
export async function generateMetadata({ params }: PageProps<'/produtos/[slug]'>): Promise<Metadata> {
const { slug } = await params;
return { title: (await getProduto(slug)).nome };
}
A variação isola generateMetadata. Acompanhe dados, controle e efeitos antes de decidir se o resultado respeita o contrato. Faça quatro passagens. Na primeira, identifique entradas e saídas. Na segunda, siga o fluxo de controle e as transformações. Na terceira, procure valores ausentes, concorrência, mutação e dependências do ambiente. Na quarta, avalie a experiência de erro e a capacidade de testar o trecho isoladamente.
Compare a variação com o exemplo principal. Escolha uma mudança e formule uma hipótese completa: “se eu alterar isto, espero aquilo, porque…”. Execute, observe e registre. A resposta importante não é apenas qual trecho passa no caso feliz, mas qual comunica melhor o contrato, reduz acoplamento e permanece compreensível para quem precisar manter, depurar ou integrar o módulo depois.
Construa — Teste cada decisão no ambiente
Crie um laboratório pequeno e executável em Next.js 16.3.4, React 19.2, TypeScript e navegador. Reproduza o exemplo, explique cada etapa e crie uma segunda versão que aplique herança de metadados sem perder objeto Metadata. Primeiro implemente o caminho principal sem abstrações prematuras. Depois use o depurador, o verificador de tipos, os testes ou as ferramentas de inspeção adequadas para confirmar o fluxo. Por último, force três situações adversas: entrada vazia, volume maior que o esperado e falha controlada em Next.js 16.3.4, React 19.2, TypeScript e navegador.
Não corrija todos os sintomas de uma vez. Para cada falha, anote hipótese, evidência e menor mudança. Rode novamente os cenários já aprovados para detectar regressões. Quando houver mais de uma solução possível, escolha pela clareza do contrato, pela facilidade de teste e pelo custo de mudança. Uma captura ou um log ajuda a documentar, mas código, critérios e testes reproduzíveis continuam sendo a fonte principal da entrega.
Pratique — Seis decisões de implementação
Resolva primeiro pelo raciocínio. Consultar o capítulo e testar hipóteses no navegador faz parte do processo; depois, releia as justificativas.
Confira — Gabarito comentado
Abrir gabarito e explicações completas
E1 — C. A implementação começa pelo contrato observável. Descreva primeiro o contrato de objeto Metadata e como ele se relaciona com generateMetadata. Assim, a sintaxe passa a servir a uma decisão que pode ser revisada.
E2 — B. A evidência precisa exercitar o mecanismo estudado. Executar o caminho principal e os limites de generateMetadata, observando o resultado de herança de metadados. O caso feliz isolado não revela limites nem recuperação.
E3 — A. A armadilha é transportar uma convenção antiga ou marcar tudo como cliente para contornar o contrato de objeto Metadata. Ela oculta o mecanismo e amplia o risco de regressão quando dados ou requisitos mudam.
E4 — C. A alternativa correta inclui pessoas e integrações no contrato: Manter nomes, estados, foco e mensagens compreensíveis quando objeto Metadata chegar à interface. Estados e limites precisam permanecer compreensíveis.
E5 — B. A sequência baseada em evidência relaciona causa e efeito. Mudanças amplas escondem o mecanismo e dificultam perceber regressões.
E6 — A. Pronto para revisão significa atender critérios observáveis. O contrato de objeto Metadata está explícito, generateMetadata foi exercitado e a falha de herança de metadados produz um estado compreensível. Outra pessoa ainda pode encontrar melhorias, mas consegue reproduzir a evidência.
Projete — Implemente, compare e refine
Entrega incremental: um laboratório Next.js sobre metadata estática e dinâmica com rota executável, tipos gerados e estados verificáveis. Comece descrevendo, em até cinco linhas, quem usa o recurso e qual tarefa precisa concluir. Separe domínio, entrada e apresentação conforme a escala do problema. Inclua um caso real, um limite e uma falha recuperável. Ao final, escreva uma nota técnica explicando onde aplicou objeto Metadata, como verificou generateMetadata e qual limite encontrou em herança de metadados.
Consultar um modelo possível
export const metadata: Metadata = { title: 'Catálogo', description: 'Produtos autorais.' };
O modelo ilustra uma possibilidade. Use os critérios para revisar suas próprias ideias, não para copiar as mesmas frases.
Critérios para revisar
- O contrato de objeto Metadata está explícito, generateMetadata foi exercitado e a falha de herança de metadados produz um estado compreensível.
- Manter nomes, estados, foco e mensagens compreensíveis quando objeto Metadata chegar à interface.
- O código evidencia objeto Metadata e generateMetadata sem estado acidental.
- A nota técnica registra o teste de entrada vazia, volume maior que o esperado e falha controlada em Next.js 16.3.4, React 19.2, TypeScript e navegador.
Até 12.000 caracteres em cada versão. Produção livre, sem correção automática.
Retome — Organize sua revisão
- Explique com suas palavras a relação entre objeto Metadata e generateMetadata.
- Reabra o laboratório sem consultar o texto e reconstrua a decisão ligada a herança de metadados.
- Aplique o teste “Executar o caminho principal e os limites de generateMetadata, observando o resultado de herança de metadados.” ao projeto acumulado e registre uma melhoria.
Feche a explicação, tente lembrar um exemplo e depois confira. Retome uma dificuldade no próximo encontro e alguns dias depois; ajuste o intervalo ao que ainda precisa praticar.
Use exemplos concretos na autoavaliação: “consigo explicar com consulta” ou “quero praticar novamente”. Marcar como lida não representa uma certificação.
SEU PROGRESSO NO CAPÍTULO 31
Um capítulo, no seu ritmo.
— exercícios respondidos
Carregando progresso…Você decide quando marcar este capítulo como lido. Isso não altera seus exercícios nem suas marcações.
Progresso salvo só neste navegador, sem sincronização com sua conta.