GuíaBásico

Guía de Next.js App Router

Lleva una app React a producción con el App Router de Next.js: routing basado en archivos, layouts anidados, Server Components —el default: renderizan en el servidor y no envían su JavaScript al cliente— frente a Client Components, data fetching en componentes `async` del servidor, rutas dinámicas con `params` y `searchParams`, loading y error UI con streaming, y Route Handlers junto con Server Actions para mutar datos sin escribir una API aparte. El eje es el cambio de modelo mental frente a una SPA clásica: en el App Router el default es el servidor, y decides con criterio qué pieza necesita interactividad del cliente —eso cambia dónde vive el estado, dónde se buscan los datos y cuánto JavaScript llega al navegador. Cada módulo ejecuta en Node.js la lógica detrás del framework —resolución de rutas, clasificación server/client, fetch en paralelo frente a cascada, revalidación tras una mutación— para verificar el razonamiento. El hilo conductor es el storefront de Mercado llevado a Next.js: su layout raíz, su home con el catálogo buscado en el servidor, su ruta dinámica de producto, y "agregar al carrito" como Server Action. Continúa directamente a la Guía de Fundamentos de React dentro del ecosistema Fullstack de NIEVA.