Rrugët Dinamike në NextJS

Në NextJS mund të krijohen rrugë dinamike. Rrugë të tilla presin që një pjesë e URL të mund të ketë një vlerë arbitrare. Për shembull, le të marrim adresën /users/1, në të cilën në vend të unitetit mund të jetë çdo numër, që korrespondon teknikisht me id-në e përdoruesit që duam të shfaqim.

Në këtë rast, nuk kemi nevojë të krijojmë shumë dosje për çdo numër të mundshëm. Mjafton të deklarojmë këtë pjesë të adresës si dinamike. Në këtë rast të gjitha kërkesat të këtij lloji do të trajtohen nga skedari i përbashkët page.jsx.

Për të bërë një parametër dinamik, duhet të vendosni emrin e dosjes përkatëse në kllapa katrore. Në rastin tonë, kjo do të jetë struktura e mëposhtme e dosjeve:

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

Le të krijojmë komponentin përkatës:

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

Në këtë rast, parametri që kemi vendosur do të ruhet në një objekt të veçantë params. Le të shfaqim vlerën e këtij parametri:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <p>
    user {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() {
  
}