Next.js

¿Qué es Next.js?

Next.js es un framework full-stack de React que ofrece Server-Side Rendering (SSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR), React Server Components y API Routes en un solo paquete. Su diferencial: permite construir desde webs estáticas hasta aplicaciones complejas con la misma herramienta, con optimización automática de Core Web Vitals sin configuración adicional.

Creado por Guillermo Rauch y lanzado como open source el 25 de octubre de 2016 por Vercel (anteriormente ZEIT, fundada en 2015). Con más de 3.000 contribuidores en GitHub y 130.000+ estrellas, es el framework React más popular del mercado. Usado por Walmart, Apple, Nike, Netflix, TikTok, Uber, Spotify, Starbucks y Washington Post. La versión actual es Next.js 16, que soporta React 19.

Características principales

• React Server Components: Renderiza componentes en el servidor sin enviar JavaScript al cliente — reduce drásticamente el bundle size y mejora TTFB
• Server Actions: Ejecuta código del servidor desde componentes React sin crear API endpoints separados, con revalidación de cache en un solo roundtrip
• App Router: Sistema de routing basado en file system con layouts anidados, loading states, error boundaries y streaming HTML nativo
• Rendering flexible: SSR, SSG, ISR y Client-Side Rendering por página — cada ruta puede tener su estrategia de renderizado óptima
• Turbopack: Bundler incremental escrito en Rust que reemplaza a Webpack con HMR hasta 10x más rápido en desarrollo
• Optimización automática: Image optimization, font optimization y script loading automáticos que mejoran Core Web Vitals sin configuración
• Middleware: Ejecuta código en el edge antes de que la petición llegue a la página — ideal para auth, A/B testing, geolocalización e i18n
• Route Handlers: API endpoints nativos para webhooks, autenticación y conexiones con servicios de terceros sin servidor separado
• TypeScript nativo: Soporte first-class con configuración automática, type checking en build y path aliases

Puntos a favor

• El framework React más adoptado: 130.000+ estrellas en GitHub, 3.000+ contribuidores y usado por Apple, Nike, Netflix, Uber y Spotify
• React Server Components + Server Actions eliminan la necesidad de APIs separadas y reducen JavaScript enviado al cliente hasta un 50%
• Turbopack (Rust) ofrece HMR hasta 10x más rápido que Webpack — diferencia notable en proyectos con 1.000+ módulos
• 100% open source (MIT) con desarrollo activo liderado por Vercel — versión 16 con soporte React 19 y mejoras de streaming
• Optimización automática de imágenes, fonts y scripts que logra Core Web Vitals superiores: CLS de 0.09 o menor reportado por clientes
• Deploy instantáneo en Vercel con preview deployments por PR, pero desplegable en cualquier proveedor (AWS, Docker, Node.js)

Puntos en contra

• Dependencia de Vercel: la mejor experiencia de despliegue es en Vercel, y self-hosting pierde funcionalidades como ISR on-demand en algunos proveedores
• Complejidad creciente: App Router + Server Components + Server Actions tienen una curva de aprendizaje significativa para desarrolladores React tradicionales
• Bundle size más grande que SvelteKit (que compila eliminando JavaScript) — SvelteKit logra bundles 50% menores con Lighthouse score de 90/100 vs ~75 de Next.js
• TTFB en edge 30% más lento que Remix según benchmarks — Remix optimiza mejor las peticiones en redes edge como Cloudflare
• HMR puede ser lento en proyectos legacy que aún usan Webpack — Turbopack aún está madurando para cubrir todos los casos
• Cambios frecuentes entre versiones (Pages Router vs App Router) generan fragmentación en documentación y tutoriales

Precios

Next.js Framework — Gratuito (Open Source, MIT)

• Sin límites de uso, código completo en GitHub
• Desplegable en cualquier hosting con Node.js o Docker

Vercel Hobby — Gratuito

• Proyectos personales, 100 GB bandwidth/mes, deploys ilimitados
• Preview deployments, Edge Functions, Analytics básicos

Vercel Pro — $20/usuario/mes

• 1 TB bandwidth, password protection, advanced analytics
• 10 miembros del equipo, 100 Edge Middleware invocations/request

Vercel Enterprise — Precio bajo consulta

• SLA 99.99%, SSO/SAML, audit log, soporte prioritario 24/7

Integraciones

React 19, TypeScript, Tailwind CSS, Prisma, Drizzle ORM, NextAuth.js, Clerk, Supabase, Firebase, Sanity, Contentful, Strapi, Shopify Hydrogen, Vercel KV, Vercel Postgres, Sentry, Datadog, Storybook, Jest, Playwright, Cypress, Docker, AWS, Google Cloud, Cloudflare. En total ofrece integración con todo el ecosistema React y Node.js más cientos de proveedores de infraestructura y CMS.

Alternativas a Next.js

• Remix (React Router v7): Framework React server-first con TTFB 30% más rápido en edge. Unificado con React Router v7, ideal para apps data-heavy con enfoque web-standards
• Nuxt: Equivalente a Next.js para el ecosistema Vue.js con SSR/SSG y HMR 80% más rápido. Ideal para equipos Vue con 1/3 del boilerplate de Next
• Astro: Framework de contenido con "zero JavaScript by default" — carga JavaScript solo donde hay interactividad. Ideal para blogs, docs y marketing sites
• SvelteKit: Framework Svelte 5 con bundles 50% menores y Lighthouse 90/100 out-of-the-box. Mejor rendimiento pero ecosistema más pequeño que React
• Gatsby: Framework SSG con data layer GraphQL para contenido de múltiples fuentes. Especializado en contenido editorial con optimización de imágenes automática

Veredicto

Next.js es el estándar de facto para desarrollo full-stack con React. Con Server Components, Server Actions y Turbopack, ofrece la experiencia de desarrollo más completa del ecosistema React. Para equipos que ya usan React, es la opción natural. Si el rendimiento puro es prioridad y puedes salir de React, SvelteKit ofrece bundles más ligeros. Para contenido estático, Astro es más eficiente. El framework es gratuito, pero la mejor experiencia de deploy está en Vercel ($20/usuario/mes para equipos).

Características Principales

• React Server Components que renderizan en el servidor sin enviar JavaScript al cliente
• Server Actions para ejecutar código servidor desde componentes sin API endpoints separados
• App Router con layouts anidados, loading states, error boundaries y streaming HTML
• Rendering flexible: SSR, SSG, ISR y Client-Side Rendering configurables por página
• Turbopack: bundler incremental en Rust con HMR hasta 10x más rápido que Webpack
• Optimización automática de imágenes, fonts y scripts para Core Web Vitals
• Middleware en edge para auth, A/B testing, geolocalización e internacionalización
• Route Handlers nativos para API endpoints, webhooks y autenticación
• TypeScript first-class con configuración automática y type checking en build

Se integra con 20 herramientas