NextJS да Динамик Роутелар

NextJS да динамик роутеларни яратиш мумкин. Бундай роутелар URL нинг бир кисми ихтиёрий қийматга эга бўлиши мумкинлигини назарда тутади. Мисол учун /users/1 манзилини олайлик, бу ердаги 1 ўрнида қайсидир рақам бўлиши мумкин, техник жиҳатдан у биз кўрсатмоқчи бўлган фойдаланувчининг id сига мос келади.

Бундай ҳолда, биз ҳар бир мумкин бўлган рақам учун кўпгина папкалар яратишимиз шарт эмас. Бу манзилнинг шу кисмини динамик эълон қилиш кифоя. Бундай ҳолда, бундай турдаги барча сўровларни умумий page.jsx файли қайта ишлайди.

Динамик параметр яратиш учун, мос келувчи папка номини қавс ичига олиш керак. Бизнинг ҳолатимизда бу куйидаги папкалар тузилими бўлади:

/app//users//[id]/

Келинг, мос келувчи компонентни ясаймиз:

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

Биз белгилаган параметр махсус params объектида сақланади. Келинг, бу параметрнинг қийматини чиқарайлик:

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

Задание 1

/city/:name кўринишидаги манзилларни қайта ишловчи роут яратинг, бу ерда :name ўрнига ихтиёрий сатр бўлиши мумкин.

Задание 2

/show/:country/:city кўринишидаги манзилларни қайта ишловчи роут яратинг, бу ерда :country ва :city ўрнига ихтиёрий сатрлар бўлиши мумкин.

Задание 3

/post/:id кўринишидаги манзилларни қайта ишловчи роут яратинг, бу ерда :id ўрнига ихтиёрий рақам бўлиши мумкин.

Куйидаги массив берилган деб ҳисобланг:

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

export default function Post() {
  
}

id параметрининг қийматига қараб компонент версткасида мос келувчи пост чиқарилишини таъминланг.

Задание 4

/prod/:id кўринишидаги манзилларни қайта ишловчи роут яратинг, бу ерда :id ўрнига ихтиёрий рақам бўлиши мумкин.

Куйидаги массив берилган деб ҳисобланг:

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

id параметрининг қийматига қараб компонент версткасида мос келувчи маҳсулот чиқарилишини таъминланг.