Grupos de rutas (Route Groups)

En el directorio app, las carpetas anidadas normalmente se asignan a rutas URL. Sin embargo, puede marcar una carpeta como Grupo de Ruta (Route Group) para evitar que la carpeta se incluya en la ruta URL.

Esto le permite organizar los segmentos de ruta y archivos del proyecto en grupos lógicos sin afectar la estructura de la ruta URL.

Los grupos de rutas son útiles para:

Organizar rutas en grupos p.ej. por sección del sitio, intención o equipo.
Habilitar diseños anidados en el mismo nivel de segmento de ruta:
- Crear múltiples diseños anidados en el mismo segmento, incluyendo múltiples diseños raíz
- Añadir un diseño a un subconjunto de rutas en un segmento común

Convención

Un grupo de rutas se puede crear envolviendo el nombre de una carpeta entre paréntesis: (nombreCarpeta)

Ejemplos

Organizar rutas sin afectar la ruta URL

Para organizar rutas sin afectar la URL, cree un grupo para mantener juntas las rutas relacionadas. Las carpetas entre paréntesis se omitirán de la URL (p.ej. (marketing) o (shop)).

Aunque las rutas dentro de (marketing) y (shop) comparten la misma jerarquía URL, puede crear un diseño diferente para cada grupo añadiendo un archivo layout.js dentro de sus carpetas.

Incluir segmentos específicos en un diseño

Para incluir rutas específicas en un diseño, cree un nuevo grupo de rutas (p.ej. (shop)) y mueva las rutas que comparten el mismo diseño al grupo (p.ej. account y cart). Las rutas fuera del grupo no compartirán el diseño (p.ej. checkout).

Crear múltiples diseños raíz

Para crear múltiples diseños raíz, elimine el archivo layout.js de nivel superior y añada un archivo layout.js dentro de cada grupo de rutas. Esto es útil para dividir una aplicación en secciones que tienen una interfaz o experiencia completamente diferente. Las etiquetas <html> y <body> deben añadirse a cada diseño raíz.

Grupos de rutas con múltiples diseños raíz

En el ejemplo anterior, tanto (marketing) como (shop) tienen su propio diseño raíz.

Nota importante:

El nombre de los grupos de rutas no tiene significado especial más allá de la organización. No afectan la ruta URL.

Las rutas que incluyen un grupo de rutas no deben resolver a la misma ruta URL que otras rutas. Por ejemplo, como los grupos de rutas no afectan la estructura URL, (marketing)/about/page.js y (shop)/about/page.js resolverían ambas a /about y causarían un error.

Si usa múltiples diseños raíz sin un archivo layout.js de nivel superior, su archivo page.js de inicio debe definirse en uno de los grupos de rutas, Por ejemplo: app/(marketing)/page.js.

Navegar entre múltiples diseños raíz causará una carga completa de página (en lugar de una navegación del lado del cliente). Por ejemplo, navegar desde /cart que usa app/(shop)/layout.js a /blog que usa app/(marketing)/layout.js causará una carga completa de página. Esto solo aplica a múltiples diseños raíz.