Características avanzadas de Next.js
Optimización de imágenes, optimización de fuentes, optimización de scripts, analytics, edge runtime, características experimentales
1¿Cuál es la principal ventaja de usar next/image en comparación con una etiqueta img estándar?
¿Cuál es la principal ventaja de usar next/image en comparación con una etiqueta img estándar?
Respuesta
next/image optimiza automáticamente las imágenes generando múltiples tamaños y formatos modernos (WebP, AVIF), aplica lazy loading por defecto y mejora las Web Vitals al evitar el Cumulative Layout Shift mediante el cálculo automático de dimensiones. A diferencia de una etiqueta img estándar que carga la imagen original, next/image sirve el tamaño óptimo según el viewport y la densidad de píxeles del dispositivo. Este enfoque reduce significativamente el tiempo de carga y el consumo de ancho de banda.
2¿Cuándo usar la propiedad priority en un componente next/image?
¿Cuándo usar la propiedad priority en un componente next/image?
Respuesta
La propiedad priority desactiva el lazy loading y precarga la imagen de inmediato, lo cual es crucial para las imágenes above-the-fold que impactan el Largest Contentful Paint (LCP). Sin priority, estas imágenes críticas se cargarían con lazy loading, retrasando el LCP y degradando los Core Web Vitals. Usar priority solo para 1-2 imágenes visibles en la carga inicial de la página, típicamente hero images o banners principales.
3¿Qué configuración de next/image permite servir imágenes desde un dominio externo?
¿Qué configuración de next/image permite servir imágenes desde un dominio externo?
Respuesta
La propiedad remotePatterns en next.config.js permite definir los dominios externos autorizados para servir imágenes, con control granular sobre el protocolo, hostname, puerto y pathname. Este enfoque reemplaza la propiedad domains (obsoleta) y ofrece mayor seguridad al limitar con precisión las fuentes autorizadas. Configurar remotePatterns evita errores 400 al cargar imágenes alojadas en CDN o servicios de terceros como Cloudinary o AWS S3.
¿Cuál es la diferencia entre fill y responsive para el sizing de next/image?
¿Cómo optimizar imágenes estáticas importadas localmente con next/image?
+21 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
Metadata & SEO en 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
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