¿Qué es Next.js?

¿Qué es Next.js?

Next.js es un meta-framework de React listo para producción desarrollado y mantenido por Vercel. "Meta-framework" significa que se sitúa sobre React (la librería de UI) y añade las preocupaciones de producción que React por sí mismo no incluye: enrutamiento, renderizado del lado del servidor, optimización de build, manejo de imágenes, carga de fuentes, rutas API, integración de despliegue. A partir de 2026, Next.js es el predeterminado de facto para construir aplicaciones React serias — elegido por la propia Vercel, OpenAI, Notion, TikTok, Twitch, GitHub Copilot y el Dashboard de Stripe.

La línea de versión principal actual es Next.js 14/15+ (2024-2026), construida alrededor del App Router (el nuevo sistema de enrutamiento que integra React Server Components) y el servidor de desarrollo Turbopack. El Pages Router anterior (Next.js 12 y anteriores) sigue siendo soportado para proyectos legacy pero ningún desarrollo nuevo debería apuntarlo.

El modelo de renderizado híbrido

La característica clave de Next.js es mezclar estrategias de renderizado por ruta dentro de una sola aplicación. Elige el modo de renderizado correcto para cada página:

SSR (Renderizado del Lado del Servidor)

La página se renderiza en el servidor para cada petición. Mejor para contenido personalizado (dashboards con sesión iniciada) o páginas donde los datos cambian por visita. Aumenta el TTFB pero asegura contenido fresco.

SSG (Generación de Sitio Estático)

La página se renderiza en tiempo de build y se sirve como archivo estático. El TTFB más rápido posible, escala a miles de millones de peticiones vía CDN. Mejor para páginas de marketing, blogs, docs. Requiere rebuild para actualizar.

ISR (Regeneración Estática Incremental)

Híbrido: las páginas son estáticas pero Next las regenera en segundo plano después de un intervalo configurable (p.ej., "cada 60 segundos"). Mejor para contenido que cambia ocasionalmente (páginas de producto, artículos de noticias, listados). Combina velocidad SSG con frescura SSR.

Streaming SSR con React Server Components (RSC)

El predeterminado moderno del App Router. El HTML renderizado en servidor se transmite al cliente cuando está listo, con hidratación selectiva del lado del cliente para componentes interactivos. Mejor para apps complejas de obtención de datos donde algunas secciones tardan más que otras.

Renderizado del lado del cliente (CSR) solo estático

Shell pre-renderizada + obtención de datos del lado del cliente. Usado para rutas altamente interactivas (dashboards) donde el SEO no importa y quieres navegación con sensación SPA.

El App Router (Next.js 13+)

El App Router introdujo React Server Components al desarrollo React mainstream. Conceptos clave:

• Server Components por defecto. Los componentes obtienen datos en el servidor, renderizan a HTML y no envían JavaScript al navegador. Esta es la mayor victoria de tamaño de bundle en años.
• Client Components opt-in vía directiva 'use client'. Usados para partes interactivas (formularios, manejadores de clic, useState).
• Enrutamiento basado en archivos vía el directorio app/. app/blog/[slug]/page.tsx sirve /blog/.
• Layouts vía archivos layout.tsx. Persistente a través de navegaciones dentro de su subárbol.
• UI de carga y error vía loading.tsx y error.tsx. Límites Suspense automáticos.
• Server Actions para mutaciones: define una función servidor, llámala desde un componente cliente, no necesitas ruta API.
• Rutas paralelas e interceptoras para layouts avanzados (modales, paneles lado a lado).

Lo que viene en la caja

• Enrutamiento basado en archivos — estructura de directorios = estructura de URL.
• Optimización de imágenes vía <Image /> — WebP/AVIF automático, tamaños responsivos, lazy loading, integración CDN.
• Optimización de fuentes vía next/font — Google Fonts auto-alojados con cero layout shift.
• Rutas API / Route Handlers — endpoints backend en el mismo proyecto. Compatibles con runtime edge.
• Middleware — corre en el edge antes de las rutas. Auth, tests A/B, enrutamiento por geolocalización.
• Soporte CSS integrado — Modules, Tailwind, Sass, adaptadores CSS-in-JS.
• TypeScript por defecto — enrutamiento type-safe, server actions, layouts.
• Turbopack — servidor dev basado en Rust (reemplazando webpack), aún estabilizándose en 2026.
• Internacionalización (i18n) — enrutamiento integrado para URLs con prefijo de locale.

Next.js vs. alternativas

Trampas comunes de Next.js

• Marcar todo como 'use client'. Anula los beneficios de tamaño de bundle de RSC. Lift state up para mantener la mayoría de los componentes renderizados en servidor.
• Suposiciones de caché incorrectas. Next 13+ tiene caché por defecto agresivo; rutas que deberían ser dinámicas se renderizan estáticamente. Usa dynamic = 'force-dynamic' o revalidate explícitamente.
• Mezclar App Router y Pages Router incorrectamente. Pueden coexistir durante migración pero rutas conflictivas se rompen silenciosamente. Migra completamente cuando puedas.
• Olvidar <Image />. El <img> nativo evade la optimización de Next. Siempre usa next/image para imágenes.
• Uso intensivo de imports dinámicos para componentes pequeños. Cada import dinámico es un round-trip de red. Resérvalo para bundles genuinamente grandes.
• Características solo Vercel. Algunas características (Edge Middleware, ISR) funcionan en todas partes pero están afinadas para Vercel. Next.js auto-alojado funciona bien pero implementas la fontanería de despliegue.
• Sobre-obtención en layouts. Una obtención de layout corre en cada navegación de página debajo de él. Eleva las obtenciones a rutas específicas cuando sea posible.

Desplegando Next.js

• Vercel — primera parte. Despliegues sin configuración, todas las características funcionan. El predeterminado para nuevas apps Next.js.
• Auto-alojado (Node) — next build + next start. Todas las características soportadas. Usa cuando necesites correr en AWS/GCP/Azure con control total.
• Auto-alojado (Docker) — guía oficial para Next.js containerizado. Común en empresas.
• Exportación estática — output: 'export' genera un sitio completamente estático. Pierde ISR/server-actions/rutas-API pero despliega a cualquier CDN.
• Cloudflare Pages, Netlify, AWS Amplify — plataformas de terceros con adaptadores Next.js. La mayoría de las características funcionan con advertencias.

FAQ: Next.js

¿Debería usar App Router o Pages Router para nuevos proyectos?

App Router. El Pages Router está en modo mantenimiento. App Router es el futuro de Next.js y obtiene nuevas características.

¿Next.js es solo para React?

Sí — Next.js es específico de React. Vue tiene Nuxt; Svelte tiene SvelteKit; Solid tiene Solid Start. Cada meta-framework se especializa en su librería UI.

¿Necesito Vercel para usar Next.js?

No. Next.js es código abierto y auto-alojable. Vercel es la empresa que lo mantiene (y ofrece el alojamiento predeterminado), pero el framework funciona donde sea que Node corra. ~50% de las grandes apps Next.js no están en Vercel.

¿Cuál es el impacto de tamaño de bundle de Next.js?

El framework añade ~70-90KB gzipped a tu JS inicial. RSC e hidratación selectiva en App Router reducen esto significativamente para el usuario, ya que muchos componentes no envían JavaScript en absoluto.

¿Cómo maneja Next.js el SEO?

Excelentemente — Next.js fue construido para SEO. SSR/SSG aseguran que las páginas sean rastreables. La API de metadata integrada genera <title>, <meta>, OpenGraph, JSON-LD. La optimización de imagen y fuente mejora los Core Web Vitals.

¿Puedo usar Next.js con TypeScript?

Next.js viene con TypeScript por defecto; create-next-app genera un proyecto TypeScript a menos que lo desactives. Las APIs del framework son type-safe de extremo a extremo.

¿Qué es Turbopack?

El bundler basado en Rust de Vercel que reemplaza webpack en el modo dev de Next.js. Aún estabilizándose en builds de producción (2026). Cold starts y HMR significativamente más rápidos.

Cómo se relaciona LoadFocus con aplicaciones Next.js

Las apps Next.js se benefician de la optimización del lado del servidor pero todavía dependen de la latencia del backend para rutas SSR y de las tasas de hit de caché de edge para ISR. Las pruebas de velocidad de sitio web LoadFocus miden los Core Web Vitals en tu app Next.js desplegada desde 30+ ubicaciones. Las pruebas de carga validan que los endpoints SSR y Server Actions aguanten bajo tráfico concurrente realista — la parte de la app que no auto-escala vía caché estático.