Presentación

Next.js es un framework React open source desarrollado por Vercel para crear aplicaciones Web que van desde un sitio estático hasta una aplicación full-stack.

Amplía React con una arquitectura de routing, funciones servidor, varias estrategias de renderizado, gestión de metadatos, optimización de imágenes y fuentes, además de un entorno de desarrollo integrado.

La arquitectura moderna se basa principalmente en App Router, un router basado en el sistema de archivos que utiliza especialmente React Server Components, Suspense y Server Functions.

Next.js permite combinar dentro de una misma aplicación contenido estático, renderizado dinámico, streaming y componentes interactivos ejecutados en el navegador.

El framework no obliga a utilizar Vercel para el despliegue: una aplicación puede funcionar especialmente sobre un servidor Node.js, dentro de Docker o adaptarse a otras plataformas.

A 3 de octubre de 2026, Next.js 16.3.8 constituye la versión estable Active LTS. Next.js 15 continúa en Maintenance LTS.

Funcionalidades

App Router y routing basado en archivos

El App Router organiza las rutas a partir de carpetas y archivos presentes dentro del directorio app.

Archivos como page, layout, loading, error o not-found definen directamente diferentes partes de una ruta.

Los layouts pueden anidarse y conservarse durante la navegación, lo que facilita la creación de interfaces que comparten navegación, sidebar o una estructura general.

Next.js también admite rutas dinámicas, grupos de rutas, rutas paralelas e interceptación de rutas.

Server Components y Client Components

Las páginas y layouts del App Router son Server Components por defecto.

Pueden acceder a datos del lado servidor, utilizar secretos que no se exponen al navegador y reducir la cantidad de JavaScript enviada al cliente.

Cuando un componente necesita estado, eventos o API del navegador, la directiva "use client" permite crear una frontera Client Component.

Ambos tipos de componentes pueden combinarse dentro de la misma interfaz para reservar JavaScript del lado cliente únicamente a las partes realmente interactivas.

Data fetching y streaming

Un Server Component puede recuperar sus datos directamente desde una API, base de datos u otra fuente asíncrona.

Next.js puede después enviar progresivamente determinadas partes de la interfaz mediante streaming y Suspense.

El archivo loading permite especialmente mostrar rápidamente un estado temporal mientras se prepara el contenido dinámico.

Esta arquitectura evita tener que crear sistemáticamente una API intermedia únicamente para transferir datos entre el servidor y un componente React.

Server Functions y Server Actions

Las Server Functions son funciones asíncronas ejecutadas del lado servidor pero que pueden activarse desde la interfaz.

Cuando se utilizan para una mutación o acción de formulario, suelen denominarse Server Actions.

Pueden, por ejemplo, crear un registro, modificar datos o procesar un formulario sin construir manualmente un endpoint independiente para cada operación.

Sin embargo, los controles de autenticación y autorización siguen siendo indispensables, ya que estas funciones constituyen auténticos puntos de entrada del servidor.

Cache Components

Next.js 16 introduce Cache Components, un enfoque donde el contenido dinámico se ejecuta por defecto durante la petición y donde la caché pasa a ser explícita.

La directiva "use cache" puede utilizarse para almacenar en caché una función, componente o página.

Funciones como cacheLife y cacheTag permiten controlar duración e invalidación.

Esta arquitectura puede combinar una estructura prerenderizada rápida con partes dinámicas mediante el principio de Partial Pre-Rendering.

Cache Components debe activarse actualmente dentro de la configuración del proyecto.

Turbopack

Turbopack es el bundler predeterminado de Next.js 16 para desarrollo y builds de producción.

Sustituye progresivamente a webpack en los nuevos workflows de Next.js y se basa en una arquitectura diseñada para compilaciones incrementales.

El servidor de desarrollo se beneficia especialmente de Fast Refresh y solo recompila las partes necesarias cuando cambia el código.

webpack continúa disponible para proyectos que todavía necesitan configuraciones o plugins específicos.

React Compiler

Next.js proporciona una integración con React Compiler.

El compilador puede analizar automáticamente componentes y Hooks para reducir determinadas optimizaciones manuales relacionadas con memoización.

Su activación continúa siendo opcional dentro de Next.js.

Esta integración permite aprovechar React Compiler sin tener que construir manualmente toda la cadena de transformación.

Imágenes, fuentes y metadatos

El componente next/image añade especialmente redimensionamiento, lazy loading y formatos modernos adaptados al dispositivo.

next/font optimiza las fuentes y puede autoalojar Google Fonts para evitar peticiones del navegador a los servidores de Google.

La API Metadata permite gestionar títulos, descripciones, favicons e imágenes Open Graph estáticas o dinámicas.

Estas funciones agrupan dentro del framework varias optimizaciones que de otro modo requerirían herramientas independientes.

Route Handlers y backend

Los Route Handlers permiten crear endpoints HTTP directamente dentro del App Router.

Pueden responder a métodos habituales como GET, POST, PUT, PATCH o DELETE.

Next.js puede así servir como Backend for Frontend para una aplicación React: llamadas a bases de datos, webhooks, autenticación o API específicas pueden colocarse junto a la interfaz.

Sin embargo, para un backend muy grande o independiente de varios clientes, un servicio dedicado puede seguir siendo preferible.

Proxy

Next.js 16 renombró la antigua convención middleware como proxy.

El archivo proxy.ts puede interceptar una petición antes del renderizado para realizar redirecciones, reescrituras, tratamiento de headers o determinadas comprobaciones.

El cambio de nombre busca representar mejor su papel como frontera de red y evitar confundirlo con los middlewares tradicionales de frameworks servidor.

Next.js recomienda reservar Proxy para situaciones donde API más específicas no sean suficientes.

App Router y Pages Router

El histórico Pages Router continúa disponible y mantenido.

Utiliza el directorio pages y las antiguas convenciones de Next.js para routing y estrategias de recuperación de datos.

Sin embargo, App Router constituye la arquitectura recomendada para nuevos proyectos y permite acceder a funciones modernas relacionadas con Server Components y Server Functions.

Por tanto, una base existente no necesita reescribirse inmediatamente solo porque utilice Pages Router.

Despliegue

Next.js puede funcionar sobre un servidor Node.js o dentro de un contenedor Docker con el conjunto completo de funcionalidades del framework.

La exportación estática permite generar archivos HTML, CSS y JavaScript desplegables sobre un alojamiento estático, pero determinadas funciones servidor dejan entonces de estar disponibles.

El framework también puede utilizar adapters para diferentes plataformas.

Vercel ofrece una integración especialmente directa con Next.js, pero no es obligatoria para utilizar el framework.

Casos de uso

Construir una aplicación React full-stack

Next.js puede reunir páginas React, acceso a datos, mutaciones servidor y endpoints HTTP dentro del mismo proyecto.

Este enfoque resulta adecuado para aplicaciones SaaS, áreas de clientes, dashboards o herramientas empresariales.

Crear un sitio editorial

El renderizado servidor, la generación estática, los metadatos y la optimización de imágenes resultan adecuados para blogs, medios, documentación o sitios de contenido.

Cada ruta puede adoptar una estrategia diferente según la frecuencia de actualización de sus datos.

Desarrollar un sitio e-commerce

Los Server Components pueden recuperar catálogo e información de producto del lado servidor, mientras que los Client Components gestionan carrito, filtros e interacciones.

Las Server Actions pueden procesar determinadas mutaciones sin multiplicar endpoints creados manualmente.

Construir una interfaz híbrida

Una página puede contener principalmente contenido producido en el servidor y solamente algunos componentes interactivos enviados al navegador.

Esta separación permite limitar el JavaScript del lado cliente sin renunciar a una experiencia rica.

Crear un Backend for Frontend

Route Handlers y Server Functions pueden agrupar la lógica necesaria específicamente para la interfaz Web.

Pueden ocultar secretos, agregar varios servicios o transformar respuestas antes de transmitirlas al cliente.

Conclusión

Next.js transforma React en un entorno full-stack estructurado alrededor de la Web moderna.

App Router combina routing basado en archivos, Server Components y renderizado progresivo, mientras que Server Functions y Route Handlers permiten añadir auténtica lógica servidor dentro del mismo proyecto.

Turbopack, optimización de imágenes y fuentes, metadatos y herramientas de caché completan este entorno con funciones listas para utilizar.

Sin embargo, el framework sigue siendo más complejo que una aplicación React completamente del lado cliente: es necesario comprender las fronteras servidor/cliente, las estrategias de caché y las consecuencias del modelo de despliegue elegido.

Para construir aplicaciones React completas con renderizado servidor, routing, acceso a datos y optimizaciones integradas, Next.js constituye actualmente uno de los principales frameworks del ecosistema React.

Puntos de atención

  • Next.js 16.3.8 es la versión estable Active LTS a 3 de octubre de 2026.

  • Next.js 15.5.27 continúa en Maintenance LTS. Las ramas 14 y anteriores ya no forman parte de las versiones con soporte oficial.

  • Los builds canary son versiones preliminares. Permiten probar próximas funcionalidades, pero no se recomiendan para tráfico de producción.

  • Next.js es gratuito y open source bajo licencia MIT. Utilizar el framework no obliga a alojar la aplicación en Vercel.

  • App Router está recomendado para nuevos proyectos. Pages Router continúa mantenido y puede seguir utilizándose en aplicaciones existentes.

  • Los Server Components se ejecutan del lado servidor por defecto dentro de App Router. Debe utilizarse "use client" cuando un componente necesita realmente estado, eventos o API del navegador.

  • Las Server Functions deben protegerse como endpoints públicos. Autenticación, autorización y validación de datos siguen siendo necesarias.

  • Cache Components es una funcionalidad opt-in. Su modelo de caché difiere de determinados comportamientos implícitos de versiones anteriores de Next.js.

  • middleware.ts está deprecado en Next.js 16 en favor de proxy.ts. Los proyectos antiguos pueden necesitar una migración.

  • Turbopack es actualmente el bundler predeterminado, pero algunos proyectos dependientes de comportamientos específicos de webpack todavía pueden necesitar este último.

  • El modelo de despliegue determina las funciones disponibles. Una exportación estática no puede proporcionar todas las capacidades de un servidor Node.js.

  • Next.js necesita actualmente Node.js 20.9 o superior para el desarrollo. Los requisitos pueden evolucionar con futuras versiones principales.

  • Las actualizaciones de seguridad deben aplicarse rápidamente. Vercel recomienda mantener las aplicaciones de producción sobre la última versión Active LTS o Maintenance LTS.