Next.js
Qué es Next.js y qué problemas resuelve
Explica qué aporta Next.js sobre React, cómo coordina routing, servidor, renderizado, datos, caché y entrega, y cuándo conviene utilizarlo.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
Next.js
Explica qué aporta Next.js sobre React, cómo coordina routing, servidor, renderizado, datos, caché y entrega, y cuándo conviene utilizarlo.
Next.js es un framework de React para construir aplicaciones web full-stack. React define el modelo de componentes y estado; Next.js añade un sistema integrado para transformar URLs, datos y código de servidor o cliente en respuestas que puedan desplegarse y operar en producción.
React permite describir una interfaz mediante componentes, pero no prescribe por sí solo cómo debe resolverse una URL, dónde cargar datos, cómo generar HTML en servidor, cómo dividir el JavaScript, cómo crear endpoints ni cómo desplegar el resultado.
Una aplicación React sin framework debe tomar esas decisiones reuniendo varias piezas:
React
+ router
+ bundler
+ servidor
+ estrategia de datos
+ renderizado
+ caché
+ metadata
+ optimización de assets
+ despliegueNext.js ofrece convenciones y herramientas para coordinar ese sistema:
request o navegación
↓
router de Next.js
↓
árbol de layouts y páginas
↓
Server Components, Client Components y datos
↓
HTML, RSC payload, JavaScript y assets
↓
navegadorEl framework no reemplaza React. Organiza dónde se ejecuta cada parte de una aplicación React y cómo se entrega.
Una aplicación web moderna debe responder preguntas que exceden el render de componentes:
/products/coffee?Sin una coordinación común, cada equipo diseña contratos propios entre router, servidor, cliente y build. Eso ofrece libertad, pero también aumenta decisiones, configuración y posibilidades de inconsistencia.
Next.js convierte muchas de esas decisiones en convenciones explícitas. Por ejemplo, una carpeta y un archivo page.tsx pueden definir una ruta; un layout.tsx define UI compartida; un route.ts define un endpoint; una boundary loading.tsx crea un estado de espera asociado al segmento.
Piensa en Next.js como un orquestador de ejecución y entrega:
React
→ describe la interfaz
Next.js Router
→ relaciona URL con segmentos
Next.js Server Runtime
→ ejecuta código de servidor, carga datos y produce respuestas
Next.js Build Tooling
→ separa bundles, analiza rutas y prepara el output
Next.js Client Runtime
→ hidrata Client Components y coordina navegación
Plataforma de despliegue
→ ejecuta y distribuye el outputCada capa tiene una responsabilidad diferente. Confundirlas lleva a errores como leer window en servidor, enviar secretos al bundle cliente o asumir que una página estática consulta datos frescos en cada request.
React aporta:
React no incluye un router web, un servidor HTTP, una estrategia de caché de aplicación ni una configuración de producción completa.
Next.js integra:
La diferencia importante no es que Next.js “tenga más componentes”. Su responsabilidad es coordinar una aplicación que atraviesa servidor, red y navegador.
Next.js mantiene dos routers.
Es el modelo moderno y utiliza las capacidades recientes de React, incluyendo Server Components, Suspense y Server Functions. La ruta se construye con segmentos dentro de app:
app/
layout.tsx
page.tsx
products/
[slug]/
page.tsxEs la opción principal para proyectos nuevos cuando no existe una restricción específica.
Es el router original basado en pages. Continúa soportado y mejorado, pero usa otro modelo de data fetching y composición:
pages/
index.tsx
products/
[slug].tsxNo mezcles APIs de ambos routers como si fueran equivalentes. getServerSideProps, por ejemplo, pertenece al Pages Router; un App Router project resuelve el mismo dominio mediante componentes de servidor, funciones dinámicas y APIs actuales.
A 24 de julio de 2026, la línea estable activa es Next.js 16.2 y el paquete next@latest corresponde a 16.2.11. Next.js 16.3 está disponible en canales preview y canary, no como release estable general.
El número de versión importa porque APIs de caché, routing, Proxy, parámetros asíncronos y herramientas de build han cambiado entre Next.js 14, 15 y 16.
Una nota o tutorial debe distinguir:
Un flujo simplificado del App Router es:
1. El navegador solicita una URL.
2. Next.js resuelve los segmentos coincidentes.
3. Se ejecutan layouts, páginas y datos del servidor.
4. React produce HTML y un RSC payload.
5. El navegador muestra HTML.
6. Descarga JavaScript de los Client Components.
7. React hidrata las regiones interactivas.El HTML permite mostrar contenido antes de tener toda la interactividad. El RSC payload representa el resultado de los Server Components y referencias necesarias para combinar el árbol. El JavaScript cliente contiene únicamente los módulos que cruzan una boundary cliente, además del runtime correspondiente.
En una navegación interna, Next.js puede solicitar una nueva respuesta de servidor y actualizar el árbol sin recargar todo el documento.
// app/page.tsx
export default function HomePage() {
return (
<main>
<h1>Mi aplicación</h1>
<p>Contenido generado por un Server Component.</p>
</main>
);
}app/page.tsx define la ruta /.Este ejemplo parece pequeño, pero ya utiliza routing, una estrategia de ejecución y un output de producción definidos por el framework.
// app/products/[slug]/page.tsx
import { notFound } from "next/navigation";
import { getProductBySlug } from "@/features/products/data";
import { AddToCartButton } from "./add-to-cart-button";
type ProductPageProps = {
params: Promise<{ slug: string }>;
};
export default async function ProductPage({ params }: ProductPageProps) {
const { slug } = await params;
const product = await getProductBySlug(slug);
if (!product) {
notFound();
}
return (
<main>
<h1>{product.name}</h1>
<p>{product.description}</p>
<AddToCartButton productId={product.id} />
</main>
);
}// app/products/[slug]/add-to-cart-button.tsx
"use client";
import { useState } from "react";
export function AddToCartButton({ productId }: { productId: string }) {
const [isPending, setIsPending] = useState(false);
async function handleClick() {
setIsPending(true);
try {
await addProductToCart(productId);
} finally {
setIsPending(false);
}
}
return (
<button type="button" onClick={handleClick} disabled={isPending}>
{isPending ? "Agregando…" : "Agregar al carrito"}
</button>
);
}[slug] toma parte de la URL como input.params, que es asíncrono en el modelo actual.notFound() selecciona la UI de recurso inexistente.use client pequeña.En producción también habría que validar el slug, manejar errores de infraestructura, diseñar caché y autorizar la mutación del carrito en el servidor.
Usar Next.js no garantiza automáticamente:
Puedes crear Client Components enormes, waterfalls de datos, imágenes pesadas o consultas lentas. El framework ofrece primitivas; el diseño sigue siendo responsabilidad del equipo.
Ocultar una ruta o un botón no autoriza una operación. Cada Action, endpoint y acceso a datos debe validar sesión, permisos e input.
Next.js facilita metadata y renderizado, pero contenido pobre, canonicals incorrectos, rutas duplicadas o páginas bloqueadas siguen perjudicando indexación.
El sistema de carpetas no reemplaza límites de dominio, una Data Access Layer ni contratos claros.
Next.js puede ejecutarse en múltiples plataformas y la versión 16.2 incluye una API estable de adapters, pero cada plataforma soporta runtimes, caché, imágenes y streaming bajo condiciones concretas.
Next.js suele aportar cuando necesitas combinar varias de estas necesidades:
Ejemplos: SaaS, e-commerce, marketplaces, portafolios con CMS, aplicaciones de contenido y dashboards con backend integrado.
Puede ser innecesario para:
La alternativa no siempre es “otro framework”. Puede ser React con Vite, un generador estático, HTML/CSS o una arquitectura frontend-backend separada.
Las convenciones reducen decisiones repetidas y facilitan que otro desarrollador reconozca el proyecto. A cambio, debes respetar archivos especiales, fronteras y ciclos del framework.
Routing, datos, servidor y build integrados simplifican flujos. También hacen que una migración de framework sea más costosa si la lógica de dominio queda mezclada con APIs de Next.js.
Server Components pueden reducir JavaScript y acercar datos a la UI. Añaden la necesidad de comprender serialización, caché y boundaries cliente-servidor.
Next.js evoluciona con rapidez. Mantener una aplicación requiere leer upgrade guides, aplicar parches de seguridad y distinguir estable de experimental.
Produce confusión sobre servidor, caché y routing. Corrígelo estudiando el request lifecycle completo.
Arrastra módulos al grafo cliente y elimina parte del beneficio server-first. Coloca la boundary cerca de la interacción.
APIs como middleware, acceso síncrono a params o configuraciones antiguas pueden haber cambiado. Verifica versión y documentación oficial.
Vercel ofrece integración profunda, pero Next.js puede auto-hospedarse o usar adapters compatibles. Debes comprobar las capacidades concretas del destino.
Dificulta pruebas y reutilización. Las rutas deberían coordinar entrada y presentación; el dominio puede vivir en módulos explícitos.
Antes de elegirlo, responde:
La decisión correcta se basa en requisitos, no en que Next.js sea popular.
"use client" en un componente muy alto?Arquitectura general y fases de una aplicación Next.js separa build time, request time, render de servidor, streaming, hidratación y navegación para evitar mezclar entornos.