Dynamiske ruter i NextJS

I NextJS kan man opprette dynamiske ruter. Slike ruter forutsetter at en del av URL-en kan ha en vilkårlig verdi. La oss ta adressen /users/1 som et eksempel, der enheten kan erstattes med et hvilket som helst tall, som teknisk sett tilsvarer id-en til brukeren vi ønsker å vise.

I dette tilfellet trenger vi ikke å opprette flere mapper for hvert mulige tall. Det er nok å erklære denne delen av adressen som dynamisk. I så fall vil alle forespørsler av denne typen blitt håndtert av en felles fil page.jsx.

For å lage en dynamisk parameter, må navnet på den tilsvarende mappen plasseres i klammeparenteser. I vårt tilfelle vil dette være følgende mappestruktur:

/app//users//[id]/

La oss lage den tilsvarende komponenten:

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

Parameteren som er satt vil lagres i et spesialobjekt params. La oss vise verdien til denne parameteren:

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

Задание 1

Lag en rute som håndterer adresser på formen /city/:name, der :name kan erstattes med en hvilken som helst streng.

Задание 2

Lag en rute som håndterer adresser på formen /show/:country/:city, der :country og :city kan erstattes med hvilke som helst strenger.

Задание 3

Lag en rute som håndterer adresser på formen /post/:id, der :id kan erstattes med et hvilket som helst tall.

La følgende array være gitt:

page.jsxlet innlegg = [
  'innlegg1',
  'innlegg2',
  'innlegg3',
  'innlegg4',
  'innlegg5',
];

export default function Post() {
  
}

Gjør slik at, avhengig av verdien til parameteren id, blir det tilsvarende innlegget vist i komponentens oppbygning.

Задание 4

Lag en rute som håndterer adresser på formen /prod/:id, der :id kan erstattes med et hvilket som helst tall.

La følgende array være gitt:

page.jsxlet produkter = [
  {
    id: 1,
    name: 'prod1',
    pris: 100,
  },
  {
    id: 2,
    name: 'prod2',
    pris: 200,
  },
  {
    id: 3,
    name: 'prod3',
    pris: 300,
  },
];

export default function Prod() {
  
}

Gjør slik at, avhengig av verdien til parameteren id, blir det tilsvarende produktet vist i komponentens oppbygning.