Lección 06. Rutas Dinamicas.

Hemos aprendido a realizar el ruteo de rutas estáticas, recordemos como hacerlo:

• Paso 1. Crear un directorio dentro de src/app (sea directamente dentro o en algun subdirectorio de él).

• Paso 2. Crear un page.tsx (o sus variantes) con contenido a renderizar.

Pero, ¿Qué sucede cuando queremos generar una ruta de manera dinámica, ahorrando en ese modo, múltiples directorios fijos.

Por ejemplo:

Si tuvieramos una app de ventas de muchos productos, donde cada producto debe tener un directorio para información de detalle personal.

Tipo:

products/1
products/2
products/3
...
products/1432

Generar multiples directorios estáticos seria muy tardado y no optimo.

Para ello, Next.js permite la generación de rutas dinamicas.

Nota: Algo similar a como funcionan los parámetros y variables GET.

Creación de rutas dinámicas._

Supongamos que tenemos la estructura de proyecto siguiente:

|- .next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
|- ...Otros archivos...

Y queremos crear una ruta tipo:

products/22/

products/1/

products/13433/

Para ello, entonces debemos realizar los siguientes pasos:

Paso 1. Generar dentro de src/app un directorio llamado products._

Quedando la estructura interior, como la siguiente:

|- .next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
      |-products
|- ...Otros archivos...

*Nota: Si deseamos, podemos generar su page.tsx a la ruta /products/. Quedando:

|- .next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-products/
      |-page.tsx
|- ...Otros archivos...

Donde el archivo, puede contener un código similar a:

export default function Products () {
  return (
    <h1>Productos</h1>
  );
}

Paso 2. Dentro de products/, creamos un segundo directorio dentro llamado [productId] (El nombre va entre [] y puede ser otro a gusto)._

Dentro de nuestro directorio products/ creado, crearemos un nuevo directorio, pero llamado:

[productId]

Al estar dentro de [], Next.js interpretará que este es un directorio dinámico, nombrado de manera dinámica, dependiendo del parámetro obtenido y a recibir en su propio page.tsx.

Nota: El nombre del directorio dinámico deberá será llamado con el mismo nombre como en el page.tsx se debe obtener.

Modificando la estructura del proyecto a:

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

Paso 3. Crear el page.tsx dentro del directorio dinámico._

En nuestro caso, crear dentro de [productId] un archivo page.tsx, con el contenido similar a:

export default function ProductDetail (
  {params}: {
    params: {
      productId: string;
    }
  }
) {
  return (
    <h1>Producto {params.productId}</h1>
  );
}

Si estamos trabajando con .jsx:

export default function ProductDetail ({params}) {
  return (
    <h1>Producto {params.productId}</h1>
  );
}

Nota: Recordemos que a nuestro directorio dinámico le dimos por nombre [productId], por lo que dentro del objeto params, existe un atributo llamado productId (u con otro nombre llamado).

Quedando la estructura de nuestro proyecto de la siguiente forma:

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

Anidación en rutas dinámicas._

Al igual que la anidación de rutas estáticas, Next.js nos permite realizar una anidación de rutas dinámicas, tal como seria el siguiente ejemplo:

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

Donde el page.tsx de /products/121/comments/ contiene:

export default function Comments () {
  return (
    <h1>Comentarios</h1>
  );
}

Y donde el page.tsx de /products/121/comments/[commentId] contiene:

export default function CommentDetail (
  {params}: {
    params: {
      productId: string;
      commentId: string;
    }
  }
) {
  return (
    <h1>Comentario {params.commentId} de Producto {params.productId}</h1>
  );
}

Nota: Donde, la ruta [commentId], puede acceder al parámetro commentId, como también al productId.

De modo que podríamos acceder a rutas similares a:

/products/121/comments/

/products/121/comments/212

Nota: Un subdirectorio dinamico, puede acceder a parametros superiores existentes de otros directorios padres dinamicos.