Metadata & SEO en Next.js
Metadata API, OpenGraph, Twitter cards, sitemap, robots.txt, esquema JSON-LD
1¿Cuál es el método recomendado para definir metadata en Next.js App Router?
¿Cuál es el método recomendado para definir metadata en Next.js App Router?
Respuesta
Next.js App Router introduce el objeto `metadata` exportado desde layouts y pages para definir metadata de manera type-safe y optimizada. Este enfoque reemplaza los componentes `<Head>` de Next.js 12 y permite el renderizado del lado del servidor de metadata. El export `metadata` es estático y se analiza en build time para un mejor rendimiento SEO.
2¿Cómo generar metadata dinámica basada en los parámetros de ruta en Next.js?
¿Cómo generar metadata dinámica basada en los parámetros de ruta en Next.js?
Respuesta
La función `generateMetadata` es asíncrona y recibe `params` y `searchParams` como argumentos, lo que permite cargar datos para construir metadata de forma dinámica. Se ejecuta del lado del servidor en el momento del renderizado y puede realizar llamadas a API. Esto permite crear metadata única para cada página dinámica, esencial para el SEO de páginas de detalle.
3¿Cómo maneja Next.js la fusión de metadata entre layouts anidados y pages?
¿Cómo maneja Next.js la fusión de metadata entre layouts anidados y pages?
Respuesta
Next.js fusiona automáticamente los metadata de los layouts padres hacia las pages hijas, con prioridad a los valores más cercanos a la page. Los campos se sobrescriben (title, description) excepto `openGraph.images` y `twitter.images` que se fusionan como arrays. Esta cascada permite definir metadata por defecto a nivel raíz y sobrescribirlos a nivel de page.
¿Cuál es el beneficio de usar `title.template` en los metadata de Next.js?
¿Cuál es el método recomendado para definir favicons en Next.js App Router?
+15 preguntas de entrevista
Otros temas de entrevista React / Next.js
Fundamentos de JavaScript
Fundamentos de React
React Hooks
Ciclo de vida de los componentes
React Router
Gestión de estado con Context
Formularios y Controlled Components
Obtención de datos y API
React Query (TanStack Query)
Styling & CSS-in-JS
Fundamentos de Next.js
TypeScript con React
Data Fetching en Next.js
Server Actions de Next.js
Routing y Navegación en Next.js
API Routes de Next.js
Middleware y Auth en Next.js
Testing en React
Zustand State Management
Optimización de Rendimiento en React
Error Boundaries & Error Handling
Advanced React Patterns
Características avanzadas de Next.js
Despliegue y Producción de Next.js
Architecture & Design Patterns
React Server Components
Internacionalización de Next.js
React Security & Buenas Prácticas
Domina React / Next.js para tu próxima entrevista
Accede a todas las preguntas, flashcards, tests técnicos, ejercicios de code review y simuladores de entrevista.
Empieza gratis