Lección 09. Rutas agrupadas.

En muchas ocasiones, dentro de nuestro proyecto, tendremos múltiples páginas relacionadas en diferentes temas o apartados de lógica.

Ya teníamos en nuestro proyecto una estructura similar a la siguiente:

|-.next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-products/
      |-page.tsx
      |-[productId]/
        |-page.txs
    |-_hidden/
      |-page.tsx
|- ...Otros archivos...

Pero queremos modificar nuestra aplicación para obtener las rutas siguientes:

/login/

/register/

/forgot-password/

Entonces, de acuerdo a lo aprendido con anterioridad, nuestra estructura quedaría similar a la siguiente:

|-.next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-products/
      |-page.tsx
      |-[productId]/
        |-page.tsx
    |-_hidden/
      |-page.tsx
    |-login/
      |-page.tsx
    |-register/
      |-page.tsx
    |-forgot-password/
      |-page.tsx
|- ...Otros archivos...

Sin embargo, esto puede ser algo complicado de entender, suponiendo que dependiendo del aumento de rutas, nuestro proyecto, tendrá una complicación de entendimiento.

Para ello, en Next.js, existe el término de agrupación de rutas.

Pero. ¿En que consiste?

¿Qué es la agrupación de rutas en Next.js?_

La agrupación de rutas en Next.js es el método por el cual podemos almacenar diferentes directorios (siendo estos rutas de nuestra aplicación) dentro de nuestro proyecto (por diversos motivos, sea por lógica de funcionalidad o por clasificación) dentro de un solo directorio. sin que este afecte la ruta dentro de nuestra aplicación.

Agrupación de rutas._

En nuestro caso de ejemplo anterior supongamos que:

Deseamos agrupar los rutas login/, register/ y forgot-password/, ya que estas rutas pertenecen a una clasificación de "auth" de nuestro proyecto.

Veamos como se realiza la agrupación de rutas.

Cambiaremos nuestra estructura de proyecto a una similar a la siguiente:

|-.next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-products/
      |-page.tsx
      |-[productId]/
        |-page.txs
    |-_hidden/
      |-page.tsx
    |-auth/
      |-login/
        |-page.tsx
      |-register/
        |-page.tsx
      |-forgot-password/
        |-page.tsx
|- ...Otros archivos...

Donde lo realizado fue:

1. Crear un nuevo directorio dentro de src/app/, el cual llamamos "auth".

2. Agregar dentro de nuestro nuevo directorio los directorios que deseamos agrupar (junto con sus respectivos page.tsx).

De este modo, dentro de nuestra aplicación, las rutas han cambiado, siendo:

• /login/ -> /auth/login/

• /register/ -> /auth/register/

• /forgot-password/ -> /auth/forgot-password/

Pero, esto no es lo que deseamos, ¿verdad?

Deseamos que las rutas:

/login/

/register/

/forgot-password/

Se mantengan.

Para solucionar esto, es tan simple como:

Colocar el nombre del directorio donde se encuentran agrupadas nuestras rutas entre signos de "()".

Tal cual como:

|-.next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-products/
      |-page.tsx
      |-[productId]/
        |-page.txs
    |-_hidden/
      |-page.tsx
    |-(auth)/
      |-login/
        |-page.tsx
      |-register/
        |-page.tsx
      |-forgot-password/
        |-page.tsx
|- ...Otros archivos...

De este modo, el directorio llamado (auth) se encuentra omitido en el ruteo dentro de nuestra aplicación de Next.js.

Nota: Cuando en algún proyecto de Next.js, visualices dentro de src/app un directorio con nombre dentro de unos "()", ahora ya sabes que es un directorio de agrupación de rutas y para encontrar las rutas internas, se omiten estos tipos de directorios.