Роутҳои динамикӣ дар NextJS

Дар NextJS шумо метавонед роутҳои динамикӣ созед. Чунин роутҳо пешбинӣ мекунанд, ки як қисми URL метавонад арзиши ихтиёрӣ дошта бошад. Барои мисол, суроғаи /users/1-ро мегирем, ки ба ҷои як метавонад ҳар гуна рақам бошад, ки техникӣ ба id-и корбар мувофиқат мекунад, ки мо мехоҳем намоиш диҳем.

Дар ин ҳолат, ба мо лозим нест, ки чандон феҳристҳо барои ҳар як рақами имконпазир созем. Кофӣ аст, ки ин қисми суроғаро динамикӣ эълон кунем. Дар ин ҳолат ҳама дархостҳои аз ин навъро файли умумии page.jsx коркард мекунад.

Барои он ки параметри динамикӣ созем, номи феҳристи мувофиқро дар қафаси росткунҷа қарор диҳед. Дар ҳолати мо, ин структураи феҳристҳои зерин хоҳад буд:

• /app//users//[id]/

Биёед компоненти мувофиқро созем:

app/users/[id]/page.jsxexport default function User() {
  return <p>
    корбар
  </p>;
}

Дар ин ҳол параметри муайянкардаи мо дар объекти махсуси params нигоҳ дошта мешавад. Биёед арзиши ин параметрро намоиш диҳем:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <p>
    корбар {params.id}
  </p>;
}

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

export default function Post() {
  
}

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