¿Por qué elegirías Next.js sobre React puro para un proyecto orientado al consumidor?

Next.js añade SSR y SSG sobre React, mejorando el SEO y el rendimiento de carga inicial que son críticos en aplicaciones orientadas al consumidor. También provee routing, optimización de imágenes y API routes integrados, reduciendo las decisiones de configuración del stack.

¿Cuál es la diferencia entre SSR, SSG e ISR en Next.js y cuándo usarías cada uno?

SSR genera la página en cada request en el servidor, ideal para contenido personalizado o muy dinámico. SSG genera la página en build time, ideal para contenido estático con máximo rendimiento. ISR combina ambos regenerando páginas estáticas en segundo plano según un intervalo, ideal para contenido que cambia pero no en tiempo real.

¿Qué ventaja ofrece el App Router de Next.js frente al Pages Router?

El App Router introduce React Server Components nativos, layouts anidados, streaming con Suspense y un modelo de fetching de datos más cercano a React. Permite componentes que se ejecutan exclusivamente en servidor sin enviar JavaScript al cliente, mejorando el rendimiento.

¿Cuándo usarías API routes de Next.js en lugar de un backend separado?

Para lógica backend ligera como webhooks, formularios de contacto, proxies hacia APIs externas o endpoints simples que no justifican un servicio separado. Para lógica de negocio compleja o equipos backend independientes, un servidor dedicado es más adecuado.

¿Qué problema resuelve el componente Image de Next.js frente a una etiqueta img estándar?

Optimiza automáticamente el formato y tamaño de las imágenes según el dispositivo del usuario, implementa lazy loading nativo, previene el layout shift con dimensiones reservadas y sirve imágenes en formatos modernos como WebP, mejorando significativamente el rendimiento y los Core Web Vitals.

¿Cómo gestiona Next.js el routing y qué ventaja ofrece frente a React Router?

Next.js usa routing basado en el sistema de archivos donde la estructura de carpetas define las rutas automáticamente. Elimina la configuración manual de rutas, soporta layouts anidados, rutas dinámicas y grupos de rutas sin configuración adicional.

¿Para qué proyectos tiene Next.js ventaja clara sobre otros frameworks frontend?

En proyectos donde el SEO es crítico como ecommerce, blogs o landing pages, cuando se necesita rendimiento de carga inicial óptimo, o cuando se quiere un stack full-stack unificado con React sin mantener un backend separado para lógica ligera.

¿Qué es el Incremental Static Regeneration y qué problema resuelve?

Permite actualizar páginas estáticas generadas en build time sin necesidad de reconstruir todo el sitio. Cuando un usuario accede a una página expirada, Next.js sirve la versión en caché mientras regenera la nueva en segundo plano, combinando el rendimiento de SSG con la frescura de SSR.

¿Cuál es la diferencia entre Server Components y Client Components en Next.js App Router?

Los Server Components se ejecutan exclusivamente en el servidor, no envían JavaScript al cliente y pueden acceder directamente a bases de datos o APIs sin exponer credenciales. Los Client Components se hidratan en el navegador y son necesarios para interactividad, estado local y acceso a APIs del navegador. Se marcan con la directiva 'use client'.

¿Cómo gestionarías el fetching de datos en el App Router de Next.js?

En Server Components usando fetch directamente con las extensiones de caché de Next.js que permiten configurar revalidación por tiempo o por tag. En Client Components usando React Query o SWR para caché y estados de carga. El modelo del App Router favorece el fetching en servidor para reducir waterfalls.

¿Qué son los Route Handlers en Next.js y cómo los usarías?

Son el equivalente de API routes en el App Router, definidos en archivos route.ts que exportan funciones con nombres de métodos HTTP. Se usan para webhooks, endpoints de autenticación, proxies a servicios externos o cualquier lógica backend que no justifica un servidor independiente.

¿Cómo implementarías autenticación en una aplicación Next.js?

Con NextAuth.js o Auth.js que integran múltiples proveedores OAuth, manejo de sesiones con JWT o base de datos y middleware de protección de rutas. La sesión puede verificarse en Server Components, middleware de Next.js o Route Handlers según el contexto donde se necesite la autorización.

¿Cómo funciona el middleware de Next.js y para qué lo usarías?

Se ejecuta en el Edge antes de que la request llegue a la página o Route Handler. Se usa para autenticación, redirecciones basadas en geolocalización, A/B testing, modificación de cabeceras o cualquier lógica que deba ejecutarse en cada request con latencia mínima.

¿Cómo optimizarías los Core Web Vitals de una aplicación Next.js?

Usando el componente Image para optimización automática, fonts con next/font para eliminar layout shift tipográfico, lazy loading de componentes pesados con dynamic imports, minimizando JavaScript en cliente con Server Components y analizando el bundle con @next/bundle-analyzer.

¿Cuándo usarías dynamic imports en Next.js y qué beneficio aportan?

Para cargar componentes pesados solo cuando son necesarios, como editores de texto enriquecido, librerías de gráficos o componentes que solo se muestran condicionalmente. Reducen el bundle inicial mejorando el tiempo de carga. Con ssr: false se pueden cargar componentes que requieren APIs del navegador.

¿Cómo gestionarías variables de entorno en Next.js diferenciando cliente y servidor?

Las variables prefijadas con NEXT_PUBLIC_ están disponibles en el cliente y se embeben en el bundle. Las variables sin ese prefijo solo están disponibles en el servidor. Nunca se exponen secretos con el prefijo NEXT_PUBLIC_ ya que serían visibles en el JavaScript del cliente.

¿Cómo estructurarías una aplicación Next.js grande con múltiples dominios de negocio?

Organizando el código en el App Router por feature con carpetas de dominio que contienen sus páginas, componentes, hooks y servicios. Una capa de servicios centraliza la comunicación con APIs externas. Se usan Server Components por defecto y Client Components solo donde la interactividad es necesaria.

¿Cómo implementarías una estrategia de caché eficiente en Next.js para contenido dinámico?

Usando fetch con revalidate por tiempo para contenido que cambia periódicamente, revalidación por tag con revalidateTag para invalidación explícita tras mutaciones, y caché de rutas completas con el Full Route Cache. En el cliente React Query añade una capa adicional de caché para reducir requests.

¿Qué consideraciones arquitectónicas tendrías al usar React Server Components en un proyecto grande?

Definir desde el inicio qué componentes necesitan interactividad para marcarlos como Client Components, evitar prop drilling de datos del servidor hacia componentes cliente profundos usando composición, y no importar librerías client-only en Server Components para no romper el árbol de renderizado.

¿Cómo desplegarías una aplicación Next.js fuera de Vercel manteniendo todas sus funcionalidades?

Usando el output standalone para generar un servidor Node.js autónomo, configurando correctamente las cabeceras de caché, implementando soporte para ISR con un backend de almacenamiento como Redis o S3 y gestionando el Edge Runtime con alternativas como Cloudflare Workers si se necesitan funciones en el edge.

¿Cómo implementarías internacionalización en una aplicación Next.js de gran escala?

Usando el soporte de i18n integrado en Next.js con detección automática de locale, combinado con next-intl o next-i18next para la gestión de traducciones. Las rutas se organizan por locale en el App Router y el middleware gestiona la redirección según el idioma preferido del usuario.

¿Cómo garantizarías la observabilidad de una aplicación Next.js en producción?

Integrando OpenTelemetry con el soporte nativo de Next.js para trazas distribuidas, usando el Web Analytics de Vercel o herramientas como Datadog para métricas de rendimiento, implementando error tracking con Sentry y monitorizando los Core Web Vitals con el componente SpeedInsights.

No entender cuándo usar Server Components vs Client Components

Marcar todos los componentes con 'use client' por defecto elimina los beneficios del App Router. No entender la diferencia y sus implicaciones en rendimiento y arquitectura refleja no haber trabajado realmente con el App Router de Next.js.

No distinguir entre las estrategias de renderizado y cuándo aplicar cada una

No saber articular cuándo usar SSR, SSG o ISR según los requisitos del proyecto refleja comprensión superficial de Next.js. Es una de las preguntas más frecuentes en entrevistas y su respuesta incorrecta genera arquitecturas con rendimiento subóptimo.

No conocer las implicaciones de exponer variables de entorno al cliente

Prefixar con NEXT_PUBLIC_ variables que contienen secretos como API keys privadas las expone en el bundle del cliente. Este error de seguridad frecuente refleja no entender cómo Next.js gestiona las variables de entorno.

No justificar Next.js frente a React puro o Remix con criterio técnico

Elegir Next.js por defecto sin evaluar si el proyecto necesita SSR o si Remix sería más adecuado refleja falta de criterio. Se espera poder articular qué aporta Next.js específicamente para el caso de uso del proyecto.

Desconocer el sistema de caché del App Router y sus niveles

Next.js tiene múltiples capas de caché que interactúan entre sí. No entender el Request Memoization, el Data Cache, el Full Route Cache y el Router Cache genera comportamientos inesperados en producción difíciles de depurar.

No considerar la experiencia de usuario durante la carga con Suspense y loading states

No implementar loading.tsx o Suspense boundaries en rutas con fetching de datos genera experiencias de usuario deficientes con pantallas en blanco. Es una práctica esperada en aplicaciones Next.js con App Router en producción.

Next.js

El framework React para aplicaciones web de producción

Next.js es un framework de React desarrollado por Vercel que extiende sus capacidades con renderizado en servidor, generación estática, routing basado en sistema de archivos, optimización de imágenes y API routes. Es la solución preferida cuando se necesita combinar la potencia de React con rendimiento, SEO y una estructura de proyecto opinionada lista para producción.

ReactTypeScriptSSRSSG

Demanda del mercado

Next.js es el framework React más adoptado para proyectos en producción. Tiene alta demanda en startups, empresas de producto y agencias que construyen aplicaciones web donde el rendimiento y el SEO son prioritarios junto con la experiencia de desarrollo de React.

Framework React más usado en producciónAlta demanda en startups y agenciasEstándar para apps React con SEO

Requisitos técnicos

Intermediate

Requiere dominio sólido de React con hooks, JavaScript moderno y conceptos de renderizado web. Familiaridad con TypeScript, HTTP y conceptos de SSR y SSG es esencial para aprovechar Next.js en proyectos reales de producción.

Casos de uso

Proyectos Reales

Next.js se utiliza para desarrollar:

Aplicaciones web con requisitos de SEO y rendimiento
Plataformas de comercio electrónico
Sitios de contenido con generación estática
Aplicaciones full-stack con API routes integradas

Tipos de Empresa

Next.js es adoptado por:

Startups con productos digitales orientados al consumidor
Agencias digitales con proyectos web modernos
Empresas de ecommerce y medios digitales
Compañías que migran aplicaciones React a producción con SSR

Escenarios de Producción

Next.js es ampliamente utilizado en entornos productivos como:

Landing pages y sitios de marketing con generación estática
Plataformas con contenido dinámico y SEO crítico
Aplicaciones full-stack con backend ligero en API routes
E-commerce con páginas de producto generadas estáticamente

Escalabilidad

Next.js ofrece múltiples mecanismos para escalar aplicaciones:

Incremental Static Regeneration para contenido actualizable sin rebuild
Edge Runtime para funciones con latencia mínima global
Image Optimization automática con el componente Image
Streaming con React Server Components para cargas progresivas

Ventajas y Desventajas

Ventajas

Combina SSR, SSG e ISR en un mismo framework con configuración mínima.

App Router con React Server Components para rendimiento y arquitectura moderna.

Ecosistema Vercel con despliegue optimizado y herramientas de observabilidad.

Desventajas

La complejidad aumenta significativamente al mezclar Server y Client Components.

Fuerte acoplamiento con Vercel para aprovechar todas sus funcionalidades.

Las actualizaciones frecuentes y cambios de paradigma requieren seguimiento constante.

Comparación

Ventajas de React (SPA)

Mayor simplicidad sin capas de renderizado adicionales
Control total sobre la arquitectura frontend
Sin acoplamiento con infraestructura específica

Consideraciones

React puro es adecuado para aplicaciones internas o dashboards sin requisitos de SEO. Next.js aporta valor real cuando el rendimiento inicial, el SEO o el full-stack en un solo proyecto son necesarios.