¿Qué es Next.js?
Next.js es un framework de React creado por Vercel que agrega todo lo que React no tiene por defecto: routing, renderizado en el servidor, optimización de imágenes, manejo de fuentes, generación de páginas estáticas, API routes y más. React es una librería de UI. Next.js es el framework completo que construís encima de ella para hacer un producto real.
Desde su versión 13 con el App Router, Next.js se convirtió en algo más: un framework full-stack que corre en el edge, con React Server Components que permiten eliminar JavaScript del cliente selectivamente, y una arquitectura que genera HTML en el servidor sin sacrificar la interactividad de React.
SSR y SSG.
El rendering define cuándo y dónde se genera el HTML de tu página. Next.js soporta tres estrategias principales. SSG (Static Site Generation): el HTML se genera en el build y se sirve como archivo estático. Ideal para contenido que no cambia frecuentemente: blogs, documentación, landing pages. Velocidad máxima. SSR (Server-Side Rendering): el HTML se genera en el servidor en cada request. Ideal para contenido dinámico que depende del usuario o de datos en tiempo real.
ISR (Incremental Static Regeneration) combina lo mejor de ambos: páginas estáticas que se regeneran en background cada N segundos. Un e-commerce puede tener páginas de producto estáticas que se actualizan cada hora sin necesidad de rebuilds completos. Esta estrategia es uno de los diferenciadores más poderosos de Next.js respecto a otros frameworks.
App Router.
El App Router (introducido en Next.js 13, estable desde la 14) es la evolución del sistema de routing de Next.js. En lugar de un directorio pages/, el routing se basa en la estructura de carpetas dentro de app/. Cada carpeta puede tener un page.tsx (la página), layout.tsx (el layout que persiste entre navegaciones), loading.tsx (skeleton mientras carga), error.tsx (manejo de errores), y not-found.tsx.
Los route groups con (nombre) permiten organizar rutas sin afectar la URL. Los layouts anidados eliminan la duplicación de headers y footers. Parallel routes y intercepting routes permiten patrones de UI complejos como modals que se abren en la URL actual.
Server Components.
React Server Components es la innovación más grande de los últimos años en el ecosistema React. Los componentes que no necesitan interactividad se renderizan completamente en el servidor: traen sus propios datos, generan HTML, y no envían JavaScript al cliente. El resultado: menos JavaScript, carga inicial más rápida, y acceso directo a bases de datos y servicios internos sin pasar por una API.
La regla simple: si el componente no usa useState, useEffect o event handlers, es un Server Component. Si necesita interactividad, es un Client Component y lleva 'use client'. Los Server Components pueden importar Client Components, pero no al revés.
Performance incluida.
Next.js incluye optimización automática en múltiples niveles. El componente Image convierte a WebP/AVIF, genera srcsets para diferentes resoluciones, implementa lazy loading, y reserva el espacio para evitar layout shift. El componente Font de next/font autoprefetcha y self-hostea fuentes de Google eliminando requests externas. El Script component maneja la estrategia de carga de JavaScript de terceros.
React vs Next.js.
La pregunta que siempre aparece: ¿cuándo uso solo React y cuándo uso Next.js? La respuesta corta: si estás haciendo una web que necesita ser indexada por buscadores, o que tiene más de 2-3 páginas, usá Next.js. Si estás haciendo una app interna detrás de login donde el SEO no importa, o una aplicación de dashboard muy interactiva, una SPA de React puede ser suficiente. En la práctica, el 90% de los proyectos se benefician de Next.js.