¿Qué es Next.js? El framework de React explicado

¿Qué es Next.js?

Next.js es un framework de React para crear aplicaciones web full-stack. Escribes la interfaz con componentes de React y Next.js añade enrutamiento, renderizado en servidor, obtención de datos, caché, gestión de imágenes y fuentes y compilación, sin que montes esas piezas tú. Lo desarrolla Vercel y puedes alojarlo en un servidor Node.js o en un contenedor Docker.

Versiones y routers

Al escribir esto (octubre de 2026) la última versión es Next.js 16.4, publicada el 6 de octubre de 2026. Con Next.js 16, Turbopack pasó a ser el empaquetador por defecto, proxy.ts sustituyó a middleware.ts y se exige Node.js 20.9 o superior. La documentación actual describe dos routers: el App Router, que admite funciones nuevas de React como los Server Components, y el Pages Router original, que sigue siendo compatible. Los proyectos nuevos empiezan con el App Router. Consulta la documentación oficial de tu versión, porque los valores por defecto han cambiado entre lanzamientos.

Cómo renderiza páginas Next.js

Next.js te permite elegir cómo se renderiza cada ruta, en lugar de imponer una sola estrategia a toda la aplicación:

• Renderizado estático (prerenderizado): la página se genera de antemano y se sirve como archivo, lo más barato de servir y muy adecuado detrás de una CDN. Consulta la generación de sitios estáticos.
• Renderizado dinámico: la página se renderiza en el servidor en cada petición, útil para páginas personalizadas. Consulta el renderizado en servidor.
• Regeneración estática incremental (ISR): una página estática se regenera en segundo plano pasado un tiempo o bajo demanda. La primera petición tras el intervalo sigue recibiendo la página en caché mientras se genera la nueva.
• Streaming: el servidor envía la página por partes según estén listas, de modo que los datos lentos no retienen toda la página.
• Cache Components: un modelo más reciente en el que marcas partes de una página con 'use cache' y el resto se renderiza en el momento de la petición. Next.js 16.4 lo recomienda para toda aplicación y lo activa en las nuevas creadas con create-next-app, y el equipo indica que será el modelo por defecto en Next.js 17.

Server Components y Client Components

En el App Router, los layouts y las páginas son Server Components por defecto. Se ejecutan en el servidor, pueden leer bases de datos y usar secretos y no envían código de componente al navegador. Añade la directiva 'use client' a un archivo cuando necesite estado, controladores de eventos o API del navegador. El navegador recibe entonces HTML para una primera vista rápida y JavaScript que hidrata las partes interactivas. Pon 'use client' en componentes interactivos pequeños y no en árboles de página enteros, para que el bundle de JavaScript siga siendo pequeño.

Un ejemplo pequeño

Esta página del App Router se prerenderiza para cada entrada del blog y se regenera como máximo una vez por hora:

// app/blog/[slug]/page.tsx
export const revalidate = 3600 // regenerate at most once an hour

export async function generateStaticParams() {
  const posts = await fetch('https://example.com/api/posts').then((r) => r.json())
  return posts.map((p) => ({ slug: p.slug }))
}

export default async function Page({ params }) {
  const { slug } = await params
  // ...fetch the post and render it on the server
}

Errores habituales con Next.js

• Marcar todo con 'use client'. Arrastra todo el subárbol al bundle del navegador y anula la ventaja de los Server Components.
• Dar por buenas las reglas de caché de una versión anterior. Los valores por defecto han cambiado entre lanzamientos y Cache Components hace que el caché sea opcional. Lee la guía de tu versión y prueba con una compilación de producción.
• Esperar ISR en todas partes. ISR necesita el runtime de Node.js y no funciona en una exportación estática. Con varias instancias de servidor, el caché por defecto es por instancia, así que necesitas un gestor de caché compartido.
• No actualizar. El equipo de Next.js publica versiones de seguridad con regularidad. Fija una versión parcheada y sigue las notas de lanzamiento.
• Usar una etiqueta de imagen simple. El componente next/image redimensiona y cachea las imágenes por ti, un img sin más no lo hace.

Next.js, rendimiento y pruebas de carga

La forma de renderizar una ruta decide dónde cae el coste. Una página estática es barata por petición, mientras que una renderizada de forma dinámica gasta CPU del servidor en cada visita, así que su tiempo hasta el primer byte y su capacidad cambian con el tráfico. Eso es justo lo que muestra una prueba de carga: sube los usuarios virtuales contra tus rutas dinámicas y tus rutas de API y observa el tiempo de respuesta y los errores. Compara una ruta en caché con otra sin caché para ver lo que aporta el caché.

Del lado del usuario, la monitorización de velocidad de página sigue las Core Web Vitals, como el Largest Contentful Paint, después de cada despliegue, y el comprobador gratuito de Core Web Vitals da una lectura rápida de una URL. Nuestra guía de presupuestos de rendimiento para aplicaciones web (en inglés) explica cómo convertir esas cifras en límites. Si trabajas con Vue, Nuxt es el equivalente, y React es la biblioteca sobre la que se apoya Next.js.

Preguntas frecuentes sobre Next.js

¿Next.js es un framework o una biblioteca?

Next.js es un framework construido sobre React. React es la biblioteca para crear la interfaz y Next.js añade a su alrededor enrutamiento, renderizado, caché y herramientas.

¿Quién desarrolla Next.js?

Lo desarrolla Vercel y el código es de código abierto en GitHub. Puedes desplegarlo en Vercel o en tu propia infraestructura.

¿Qué diferencia hay entre el App Router y el Pages Router?

El App Router es el router más nuevo. Admite React Server Components, layouts anidados y streaming. El Pages Router es el original y sigue siendo compatible. Durante una migración pueden convivir en un mismo proyecto.

¿Next.js es bueno para el SEO?

Puede serlo, porque las páginas se pueden renderizar a HTML en el servidor o durante la compilación, de modo que los rastreadores reciben el contenido sin ejecutar tu JavaScript. Los buenos resultados siguen dependiendo de páginas rápidas, metadatos limpios y contenido útil.

¿Necesito Vercel para alojar Next.js?

No. Next.js funciona en un servidor Node.js o en un contenedor Docker, y las plataformas pueden darle soporte mediante adaptadores. Funciones como ISR requieren entonces la configuración descrita en la documentación de autoalojamiento, por ejemplo un caché compartido cuando ejecutas más de una instancia.