Fundamentos de Enrutamiento
El esqueleto de toda aplicación es el enrutamiento. Esta página te introducirá a los conceptos fundamentales del enrutamiento web y cómo manejarlo en Next.js.
Terminología
Primero, verás estos términos utilizados a lo largo de la documentación. Aquí tienes una referencia rápida:
- Árbol: Convención para visualizar una estructura jerárquica. Por ejemplo, un árbol de componentes con componentes padre e hijos, una estructura de carpetas, etc.
- Subárbol: Parte de un árbol, comenzando en una nueva raíz (primera) y terminando en las hojas (últimas).
- Raíz: El primer nodo en un árbol o subárbol, como un diseño raíz.
- Hoja: Nodos en un subárbol que no tienen hijos, como el último segmento en una ruta URL.
- Segmento de URL: Parte de la ruta URL delimitada por barras.
- Ruta URL: Parte de la URL que viene después del dominio (compuesta por segmentos).
El Enrutador app
En la versión 13, Next.js introdujo un nuevo Enrutador App construido sobre Componentes de Servidor React, que soporta diseños compartidos, enrutamiento anidado, estados de carga, manejo de errores y más.
El Enrutador App funciona en un nuevo directorio llamado app. El directorio app trabaja junto al directorio pages para permitir adopción incremental. Esto te permite optar por el nuevo comportamiento en algunas rutas de tu aplicación mientras mantienes otras rutas en el directorio pages con el comportamiento anterior. Si tu aplicación usa el directorio pages, consulta también la documentación del Enrutador Pages.
Bueno saber: El Enrutador App tiene prioridad sobre el Enrutador Pages. Las rutas entre directorios no deben resolver a la misma ruta URL y causarán un error en tiempo de compilación para prevenir conflictos.
Por defecto, los componentes dentro de app son Componentes de Servidor React. Esta es una optimización de rendimiento y te permite adoptarlos fácilmente, y también puedes usar Componentes de Cliente.
Recomendación: Revisa la página de Servidor si eres nuevo en Componentes de Servidor.
Roles de Carpetas y Archivos
Next.js usa un enrutador basado en sistema de archivos donde:
- Carpetas se usan para definir rutas. Una ruta es un único camino de carpetas anidadas, siguiendo la jerarquía del sistema de archivos desde la carpeta raíz hasta una carpeta hoja final que incluye un archivo
page.js. Ver Definiendo Rutas. - Archivos se usan para crear UI que se muestra para un segmento de ruta. Ver archivos especiales.
Segmentos de Ruta
Cada carpeta en una ruta representa un segmento de ruta. Cada segmento de ruta se mapea a un segmento correspondiente en una ruta URL.
Rutas Anidadas
Para crear una ruta anidada, puedes anidar carpetas dentro de otras. Por ejemplo, puedes añadir una nueva ruta /dashboard/settings anidando dos nuevas carpetas en el directorio app.
La ruta /dashboard/settings está compuesta por tres segmentos:
/(Segmento raíz)dashboard(Segmento)settings(Segmento hoja)
Convenciones de Archivos
Next.js proporciona un conjunto de archivos especiales para crear UI con comportamientos específicos en rutas anidadas:
layout | UI compartida para un segmento y sus hijos |
page | UI única de una ruta y hace las rutas accesibles públicamente |
loading | UI de carga para un segmento y sus hijos |
not-found | UI de no encontrado para un segmento y sus hijos |
error | UI de error para un segmento y sus hijos |
global-error | UI de Error Global |
route | Endpoint API del lado del servidor |
template | UI de Diseño re-renderizada especializada |
default | UI de respaldo para Rutas Paralelas |
Bueno saber: Las extensiones de archivo
.js,.jsx, o.tsxpueden usarse para archivos especiales.
Jerarquía de Componentes
Los componentes React definidos en archivos especiales de un segmento de ruta se renderizan en una jerarquía específica:
layout.jstemplate.jserror.js(Límite de error React)loading.js(Límite de suspense React)not-found.js(Límite de error React)page.jsolayout.jsanidado
En una ruta anidada, los componentes de un segmento estarán anidados dentro de los componentes de su segmento padre.
Colocación Conjunta
Además de los archivos especiales, tienes la opción de colocar tus propios archivos (ej. componentes, estilos, tests, etc) dentro de carpetas en el directorio app.
Esto se debe a que mientras las carpetas definen rutas, solo los contenidos devueltos por page.js o route.js son direccionables públicamente.
Aprende más sobre Organización de Proyecto y Colocación Conjunta.
Patrones de Enrutamiento Avanzados
El Enrutador App también proporciona un conjunto de convenciones para ayudarte a implementar patrones de enrutamiento más avanzados. Estos incluyen:
- Rutas Paralelas: Te permiten mostrar simultáneamente dos o más páginas en la misma vista que pueden navegarse independientemente. Puedes usarlas para vistas divididas que tienen su propia sub-navegación. Ej. Dashboards.
- Rutas de Intercepción: Te permiten interceptar una ruta y mostrarla en el contexto de otra ruta. Puedes usarlas cuando mantener el contexto para la página actual es importante. Ej. Ver todas las tareas mientras editas una tarea o expandir una foto en un feed.
Estos patrones te permiten construir UIs más ricas y complejas, democratizando características que históricamente eran complejas para equipos pequeños y desarrolladores individuales.
Siguientes Pasos
Ahora que entiendes los fundamentos del enrutamiento en Next.js, sigue los enlaces abajo para crear tus primeras rutas: