¿Qué es Next.js y qué añade sobre React?

Question

Accepted Answer

**Next.js** es un **framework** React full-stack. React en sí es solo una librería de UI — renderiza componentes pero deja el enrutamiento, la obtención de datos, el renderizado del servidor y las herramientas de compilación en tus manos. Next.js proporciona todo eso de forma predeterminada, además de un runtime de servidor. ## Por qué es importante ```text React (library) → Next.js (framework) adds: ────────────────────────────────────────────────── UI rendering only → File-based routing (folders = routes) Client-side rendering → Server rendering (SSR), static generation (SSG), ISR You wire data fetching → Built-in data fetching + caching No backend → API routes / Route Handlers (full-stack) Manual bundling → Zero-config build, code splitting, optimization Manual → next/image (auto-optimized images), next/font ``` ## Un ejemplo concreto: una ruta es solo un archivo ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` En React puro instalarías un enrutador, configurarías rutas y configurarías una compilación. En Next.js, crear el archivo *es* la ruta. ## Por qué los equipos la eligen - **SEO y rendimiento** — HTML renderizado en el servidor significa que el contenido está en la respuesta inicial (bueno para rastreadores y renderizado rápido), a diferencia de un SPA React solo en cliente que envía una página en blanco e hidrata después. - **Full-stack en un proyecto** — frontend y backend (rutas API, Server Actions) viven juntos. - **Valores predeterminados listos para producción** — división automática de código, optimización de imágenes/fuentes, almacenamiento en caché. ## Por qué es importante Next.js es el framework React más popular porque convierte React de una librería de UI en una plataforma de aplicación completa — manejando la estrategia de renderizado, enrutamiento, datos y un backend para que te enfoque en características en lugar de configuración. Es la opción predeterminada cuando necesitas SEO, rendimiento o lógica del lado del servidor con React.