Dynamiske ruter i NextJS

I NextJS kan du oprette dynamiske ruter. Sådanne ruter forudsætter, at en del af URL'en kan have en vilkårlig værdi. Som eksempel tager vi adressen /users/1, hvor i stedet for ettallet kan der være et hvilket som helst tal, der teknisk set svarer til brugerens id, som vi ønsker at vise.

I dette tilfælde behøver vi ikke at oprette mange mapper for hvert mulige tal. Det er nok at erklære denne del af adressen for dynamisk. I dette tilfælde vil en fælles fil page.jsx håndtere alle anmodninger af denne type.

For at lave en dynamisk parameter skal den tilsvarende mappes navn sættes i firkantede parenteser. I vores tilfælde vil det være følgende mappestruktur:

/app//users//[id]/

Lad os lave den tilsvarende komponent:

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

Den parameter, vi har angivet, vil blive gemt i et specielt objekt params. Lad os udskrive værdien af denne parameter:

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

Задание 1

Lav en rute, der håndterer adresser af typen /city/:name, hvor i stedet for :name kan der være en hvilken som helst streng.

Задание 2

Lav en rute, der håndterer adresser af typen /show/:country/:city, hvor i stedet for :country og :city kan der være vilkårlige strenge.

Задание 3

Lav en rute, der håndterer adresser af typen /post/:id, hvor i stedet for :id kan der være et hvilket som helst tal.

Lad der være givet følgende array:

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

export default function Post() {
  
}

Sørg for, at afhængigt af parameterens id værdi bliver det tilsvarende indlæg vist i komponentens opmærkning.

Задание 4

Lav en rute, der håndterer adresser af typen /prod/:id, hvor i stedet for :id kan der være et hvilket som helst tal.

Lad der være givet følgende array:

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

Sørg for, at afhængigt af parameterens id værdi bliver det tilsvarende produkt vist i komponentens opmærkning.