Rutas Dinámicas en NextJS

En NextJS se pueden crear rutas dinámicas. Estas rutas suponen que parte de la URL puede tener un valor arbitrario. Como ejemplo, tomemos la dirección /users/1, en la cual en lugar del uno puede haber cualquier número, que técnicamente corresponde al id del usuario que queremos mostrar.

En este caso, no necesitamos crear múltiples carpetas para cada número posible. Es suficiente declarar esta parte de la dirección como dinámica. En este caso, todas las solicitudes de este tipo serán manejadas por un archivo común page.jsx.

Para crear un parámetro dinámico, el nombre de la carpeta correspondiente debe ponerse entre corchetes. En nuestro caso, la estructura de carpetas será la siguiente:

/app//users//[id]/

Hagamos el componente correspondiente:

app/users/[id]/page.jsxexport default function User() {
  return <p>
    user
  </p>;
}

El parámetro que definimos se almacenará en un objeto especial params. Mostremos el valor de este parámetro:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <p>
    user {params.id}
  </p>;
}

Задание 1

Crea una ruta que maneje direcciones del tipo /city/:name, donde en lugar de :name puede haber cualquier cadena.

Задание 2

Crea una ruta que maneje direcciones del tipo /show/:country/:city, donde en lugar de :country y :city puede haber cualquier cadena.

Задание 3

Crea una ruta que maneje direcciones del tipo /post/:id, donde en lugar de :id puede haber cualquier número.

Supongamos el siguiente array:

page.jsxlet posts = [
  'post1',
  'post2',
  'post3',
  'post4',
  'post5',
];

export default function Post() {
  
}

Haz que, dependiendo del valor del parámetro id, se muestre la publicación correspondiente en el maquetado del componente.

Задание 4

Crea una ruta que maneje direcciones del tipo /prod/:id, donde en lugar de :id puede haber cualquier número.

Supongamos el siguiente array:

page.jsxlet prods = [
  {
    id: 1,
    name: 'prod1',
    cost: 100,
  },
  {
    id: 2,
    name: 'prod2',
    cost: 200,
  },
  {
    id: 3,
    name: 'prod3',
    cost: 300,
  },
];

export default function Prod() {
  
}

Haz que, dependiendo del valor del parámetro id, se muestre el producto correspondiente en el maquetado del componente.