Routes dynamiques dans NextJS

Dans NextJS, il est possible de créer des routes dynamiques. De telles routes supposent qu'une partie de l'URL peut avoir une valeur arbitraire. Prenons par exemple l'adresse /users/1, dans laquelle le chiffre 1 peut être remplacé par n'importe quel nombre, correspondant techniquement à l'id de l'utilisateur que nous souhaitons afficher.

Dans ce cas, nous n'avons pas besoin de créer de multiples dossiers pour chaque nombre possible. Il suffit de déclarer cette partie de l'adresse comme dynamique. Dans ce cas, toutes les requêtes de ce type seront traitées par un fichier commun page.jsx.

Pour créer un paramètre dynamique, il faut mettre le nom du dossier correspondant entre crochets. Dans notre cas, cela donnera la structure de dossiers suivante :

/app//users//[id]/

Créons le composant correspondant :

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

Le paramètre que nous avons défini sera stocker dans un objet spécial params. Afficher la valeur de ce paramètre :

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

Задание 1

Créez une route qui traite les adresses de type /city/:name, où :name peut être remplacé par n'importe quelle chaîne de caractères.

Задание 2

Créez une route qui traite les adresses de type /show/:country/:city, où :country et :city peuvent être remplacés par n'importe quelles chaînes de caractères.

Задание 3

Créez une route qui traite les adresses de type /post/:id, où :id peut être remplacé par n'importe quel nombre.

Soit le tableau suivant :

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

export default function Post() {
  
}

Faites en sorte qu'en fonction de la valeur du paramètre id, le post correspondant soit affiché dans le rendu du composant.

Задание 4

Créez une route qui traite les adresses de type /prod/:id, où :id peut être remplacé par n'importe quel nombre.

Soit le tableau suivant :

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() {
  
}

Faites en sorte qu'en fonction de la valeur du paramètre id, le produit correspondant soit affiché dans le rendu du composant.