Dünaamilised ruudid NextJS-is

NextJS-is on võimalik luua dünaamilisi ruute. Sellised ruudid eeldavad, et osa URL-ist võib omada suvalist väärtust. Näiteks võtame adressi /users/1, kus ühe asemel võib olla suvaline number, tehniliselt vastavada kasutaja id-le, keda me soovime kuvada.

Sel juhul ei pea me looma mitut kausta iga võimaliku numbri jaoks. Piisab, kui kuulutame selle osa adressist dünaamiliseks. Sel juhul tegeleb kõikide selliste päringutega ühine fail page.jsx.

Selleks, et teha dünaamiline parameeter, tuleb vastava kausta nimi panna nurksulgudesse. Meie puhul on see järgmine kaustade struktuur:

/app//users//[id]/

Teeme vastava komponendi:

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

Samal ajal hoitakse meie poolt määratud parameetrit spetsiaalses objektis params. Kuvame selle parameetri väärtuse:

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

Задание 1

Tehke ruut, mis töötleb aadresse kujul /city/:name, kus :name asemel võib olla suvaline string.

Задание 2

Tehke ruut, mis töötleb aadresse kujul /show/:country/:city, kus :country ja :city asemel võivad olla suvalised stringid.

Задание 3

Tehke ruut, mis töötleb aadresse kujul /post/:id, kus :id asemel võib olla suvaline number.

Olgu antud järgmine massiiv:

page.jsxlet postitused = [
  'postitus1',
  'postitus2',
  'postitus3',
  'postitus4',
  'postitus5',
];

export default function Post() {
  
}

Tehke nii, et sõltuvalt parameetri id väärtusest kuvataks komponendi veebilehel vastav postitus.

Задание 4

Tehke ruut, mis töötleb aadresse kujul /prod/:id, kus :id asemel võib olla suvaline number.

Olgu antud järgmine massiiv:

page.jsxlet tooted = [
  {
    id: 1,
    nimi: 'toode1',
    maksumus: 100,
  },
  {
    id: 2,
    nimi: 'toode2',
    maksumus: 200,
  },
  {
    id: 3,
    nimi: 'toode3',
    maksumus: 300,
  },
];

export default function Prod() {
  
}

Tehke nii, et sõltuvalt parameetri id väärtusest kuvataks komponendi veebilehel vastav toode.