Next.js 14 introduce nuevas características emocionantes incluyendo el App Router, Server Components y rendimiento mejorado. En esta guía te guiaremos a través de la configuración de un nuevo proyecto, la comprensión del sistema de enrutamiento basado en archivos y la construcción de tus primeras páginas con React Server Components.
El App Router usa un enrutamiento basado en el sistema de archivos donde las carpetas definen las rutas. Cada página es un Server Component por defecto, lo que significa que tu código de componente permanece en el servidor y solo el HTML resultante se envía al cliente. Esto reduce el tamaño del paquete JavaScript y mejora los tiempos de carga inicial.
Los layouts y templates facilitan compartir UI entre rutas. Un archivo layout.tsx envuelve las rutas hijas y persiste durante la navegación, mientras que template.tsx se vuelve a montar en cada visita. Usa layouts para encabezados y pies de página compartidos, y templates cuando necesites reiniciar el estado.
La obtención de datos en el App Router es directa: fetch directamente en tus Server Components. Next.js extiende la API nativa fetch con deduplicación automática de solicitudes y una caché predeterminada. Para datos dinámicos, usa las opciones de configuración del segmento o llama a cookies() y headers() cuando sea necesario.
Cuando estés listo para agregar interactividad, usa la directiva "use client" al inicio de un archivo para crear un Client Component. Mantén el límite del cliente lo más bajo posible: empuja los componentes cliente hacia abajo en el árbol para que la mayor parte de tu app permanezca en el servidor y sea rápida.
Key Takeaways
- El App Router usa carpetas para rutas; las páginas son Server Components por defecto.
- Los layouts persisten entre rutas; los templates se vuelven a montar en la navegación.
- Obtén datos en Server Components; Next.js deduplica y cachea automáticamente.
- Usa "use client" solo donde necesites interactividad para mantener los paquetes pequeños.
