Question 1

Qual é o método recomendado para definir metadata no Next.js App Router?

Accepted Answer

O Next.js App Router introduz o objeto `metadata` exportado a partir de layouts e pages para definir metadata de forma type-safe e otimizada. Essa abordagem substitui os componentes `<Head>` do Next.js 12 e permite a renderização do lado do servidor de metadata. O export `metadata` é estático e analisado em build time para melhor performance de SEO.

Question 2

Como gerar metadata dinâmica com base nos parâmetros de rota no Next.js?

Accepted Answer

A função `generateMetadata` é assíncrona e recebe `params` e `searchParams` como argumentos, permitindo carregar dados para construir metadata dinamicamente. Ela é executada no lado do servidor no momento da renderização e pode fazer chamadas de API. Isso permite criar metadata única para cada página dinâmica, essencial para o SEO de páginas de detalhe.

Question 3

Como o Next.js lida com a fusão de metadata entre layouts aninhados e pages?

Accepted Answer

O Next.js faz a fusão automática dos metadata dos layouts pais para as pages filhas, com prioridade para os valores mais próximos da page. Os campos são sobrescritos (title, description) exceto `openGraph.images` e `twitter.images` que são mesclados como arrays. Essa cascata permite definir metadata padrão no nível raiz e sobrescrevê-los no nível da page.

Metadata & SEO no Next.js

Qual é o método recomendado para definir metadata no Next.js App Router?

Resposta

Como gerar metadata dinâmica com base nos parâmetros de rota no Next.js?

Resposta

Como o Next.js lida com a fusão de metadata entre layouts aninhados e pages?

Resposta

Qual é o benefício de usar `title.template` nos metadata do Next.js?

Qual é o método recomendado para definir favicons no Next.js App Router?

Outros temas de entrevista React / Next.js

Fundamentos de JavaScript

Fundamentos do React

React Hooks

Ciclo de vida dos componentes

React Router

Gerenciamento de estado com Context

Formulários e Controlled Components

Busca de dados e API

React Query (TanStack Query)

Styling & CSS-in-JS

Fundamentos do Next.js

TypeScript com React

Data Fetching no Next.js

Server Actions do Next.js

Roteamento e Navegação no Next.js

API Routes do Next.js

Middleware e Auth no Next.js

Testes em React

Zustand State Management

Otimização de Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Recursos avançados do Next.js

Deploy e Produção com Next.js

Architecture & Design Patterns

React Server Components

Internacionalização do Next.js

React Security & Boas Práticas

Domine React / Next.js para sua proxima entrevista