Route dinamiche in NextJS

In NextJS puoi creare route dinamiche. Tali route presuppongono che parte dell'URL possa avere un valore arbitrario. Ad esempio, prendiamo l'indirizzo /users/1, in cui invece di uno può esserci qualsiasi numero, tecnicamente corrispondente all'id dell'utente che vogliamo visualizzare.

In questo caso, non abbiamo bisogno di creare multiple cartelle per ogni numero possibile. È sufficiente dichiarare questa parte dell'indirizzo come dinamica. In questo modo tutte le richieste di questo tipo saranno gestite da un unico file page.jsx.

Per creare un parametro dinamico, è necessario racchiudere il nome della cartella corrispondente tra parentesi quadre. Nel nostro caso, la struttura delle cartelle sarà la seguente:

/app//users//[id]/

Creiamo il componente corrispondente:

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

Il parametro che abbiamo impostato sarà contenuto in un oggetto speciale params. Visualizziamo il valore di questo parametro:

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

Задание 1

Crea una route che gestisca gli indirizzi del tipo /city/:name, dove invece di :name può esserci qualsiasi stringa.

Задание 2

Crea una route che gestisca gli indirizzi del tipo /show/:country/:city, dove invece di :country e :city possono esserci qualsiasi stringa.

Задание 3

Crea una route che gestisca gli indirizzi del tipo /post/:id, dove invece di :id può esserci qualsiasi numero.

Sia dato il seguente array:

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

export default function Post() {
  
}

Fai in modo che, in base al valore del parametro id, nel markup del componente venga visualizzato il post corrispondente.

Задание 4

Crea una route che gestisca gli indirizzi del tipo /prod/:id, dove invece di :id può esserci qualsiasi numero.

Sia dato il seguente 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() {
  
}

Fai in modo che, in base al valore del parametro id, nel markup del componente venga visualizzato il prodotto corrispondente.