Dynamiska rutter i NextJS

I NextJS kan man skapa dynamiska rutter. Sådana rutter förutsätter att en del av URL:en kan ha ett godtyckligt värde. Som exempel tar vi adressen /users/1, där istället för ettorna kan vara vilket tal som helst, som tekniskt sett motsvarar id för användaren som vi vill visa.

I det här fallet behöver vi inte skapa många mappar för varje möjligt tal. Det räcker att deklarera den här delen av adressen som dynamisk. I så fall kommer alla förfrågningar av detta slag att hanteras av en gemensam fil page.jsx.

För att skapa en dynamisk parameter måste namnet på motsvarande mapp sättas inom hakparenteser. I vårt fall blir det följande mappstruktur:

/app//users//[id]/

Låt oss skapa motsvarande komponent:

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

Den parameter vi har satt kommer att lagras i ett speciellt objekt params. Låt oss visa värdet på denna parameter:

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

Задание 1

Skapa en rutt som hanterar adresser av typen /city/:name, där istället för :name kan vara vilken sträng som helst.

Задание 2

Skapa en rutt som hanterar adresser av typen /show/:country/:city, där istället för :country och :city kan vara vilka strängar som helst.

Задание 3

Skapa en rutt som hanterar adresser av typen /post/:id, där istället för :id kan vara vilket tal som helst.

Låt följande array ges:

page.jsxlet posts = [
  'inlägg1',
  'inlägg2',
  'inlägg3',
  'inlägg4',
  'inlägg5',
];

export default function Post() {
  
}

Gör så att beroende på värdet på parametern id i komponentens utskrift visas motsvarande inlägg.

Задание 4

Skapa en rutt som hanterar adresser av typen /prod/:id, där istället för :id kan vara vilket tal som helst.

Låt följande array ges:

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

Gör så att beroende på värdet på parametern id i komponentens utskrift visas motsvarande produkt.