Dinamikus útvonalak a NextJS-ben

A NextJS-ben lehetőség van dinamikus útvonalak létrehozására. Az ilyen útvonalak azt feltételezik, hogy az URL egy része tetszőleges értékű lehet. Példaként vegyük a /users/1 címet, ahol az egység helyett bármelyik szám lehet, amely technikailag annak a felhasználónak az azonosítójának felel meg, akit ki szeretnénk jeleníteni.

Ebben az esetben nem kell sok mappát létrehoznunk minden lehetséges számhoz. Elég ezt az útvonalrészt dinamikussá nyilvánítani. Ebben az esetben minden ilyen típusú kérést egy közös page.jsx fájl fog kezelni.

Ahhoz, hogy egy dinamikus paramétert készítsünk, a megfelelő mappa nevét szögletes zárójelek közé kell tenni. Esetünkben a következő mappaszerkezet lesz:

/app//users//[id]/

Készítsük el a megfelelő komponenst:

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

Ebben az esetben a megadott paraméter egy speciális params objektumban lesz tárolva. Jelenítsük meg a paraméter értékét:

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

Задание 1

Készítsen egy útvonalat, amely a /city/:name formátumú címeket kezeli, ahol a :name helyett bármilyen sztring lehet.

Задание 2

Készítsen egy útvonalat, amely a /show/:country/:city formátumú címeket kezeli, ahol a :country és a :city helyett bármilyen sztringek lehetnek.

Задание 3

Készítsen egy útvonalat, amely a /post/:id formátumú címeket kezeli, ahol a :id helyett bármilyen szám lehet.

Legyen adott a következő tömb:

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

export default function Post() {
  
}

Úgy állítsa be, hogy a id paraméter értékétől függően a komponens megjelenítésében a megfelelő bejegyzés jelenjen meg.

Задание 4

Készítsen egy útvonalat, amely a /prod/:id formátumú címeket kezeli, ahol a :id helyett bármilyen szám lehet.

Legyen adott a következő tömb:

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

Úgy állítsa be, hogy a id paraméter értékétől függően a komponens megjelenítésében a megfelelő termék jelenjen meg.