Dynamische Routen in NextJS

In NextJS können dynamische Routen erstellt werden. Solche Routen setzen voraus, dass ein Teil der URL einen beliebigen Wert haben kann. Als Beispiel nehmen wir die Adresse /users/1, in der statt der Eins jede Zahl stehen kann, die technisch der ID des Users entspricht, den wir ausgeben möchten.

In diesem Fall müssen wir nicht viele Ordner für jede mögliche Zahl erstellen. Es reicht aus, diesen Teil der Adresse als dynamisch zu deklarieren. In diesem Fall wird eine gemeinsame Datei page.jsx alle Anfragen dieser Art verarbeiten.

Um einen dynamischen Parameter zu erstellen, muss der Name des entsprechenden Ordners in eckige Klammern gesetzt werden. In unserem Fall wäre das die folgende Ordnerstruktur:

/app//users//[id]/

Lassen Sie uns die entsprechende Komponente erstellen:

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

Dabei wird der von uns gesetzte Parameter in einem speziellen Objekt params gespeichert. Lassen Sie uns den Wert dieses Parameters ausgeben:

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

Задание 1

Erstellen Sie eine Route, die Adressen des Typs /city/:name verarbeitet, wobei statt :name eine beliebige Zeichenkette stehen kann.

Задание 2

Erstellen Sie eine Route, die Adressen des Typs /show/:country/:city verarbeitet, wobei statt :country und :city beliebige Zeichenketten stehen können.

Задание 3

Erstellen Sie eine Route, die Adressen des Typs /post/:id verarbeitet, wobei statt :id eine beliebige Zahl stehen kann.

Gegeben sei das folgende Array:

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

export default function Post() {
  
}

Sorgen Sie dafür, dass abhängig vom Wert des Parameters id in der Darstellung der Komponente der entsprechende Post ausgegeben wird.

Задание 4

Erstellen Sie eine Route, die Adressen des Typs /prod/:id verarbeitet, wobei statt :id eine beliebige Zahl stehen kann.

Gegeben sei das folgende 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() {
  
}

Sorgen Sie dafür, dass abhängig vom Wert des Parameters id in der Darstellung der Komponente das entsprechende Produkt ausgegeben wird.