NextJS-тегі динамикалық жолдар

NextJS-те динамикалық жолдар жасауға болады. Мұндай жолдар URL-нің бір бөлігі ерікті мәнге ие болуы мүмкін деп есептейді. Мысал ретінде /users/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 параметрінің мәніне байланысты компоненттің нұсқасында сәйкес өнім шығарылуы үшін жасаңыз.