Δυναμικές Διαδρομές στο NextJS

Στο NextJS μπορείτε να δημιουργήσετε δυναμικές διαδρομές. Τέτοιες διαδρομές προϋποθέτουν ότι μέρος του URL μπορεί να έχει αυθαίρετη τιμή. Για παράδειγμα, ας πάρουμε τη διεύθυνση /users/1, στην οποία αντί για ένα μπορεί να είναι οποιοσδήποτε αριθμός, τεχνικά αντιστοιχεί στο id του χρήστη που θέλουμε να εμφανίσουμε.

Σε αυτήν την περίπτωση, δεν χρειάζεται να δημιουργήσουμε πολλά φακέλους για κάθε πιθανό αριθμό. Αρκεί να δηλώσουμε αυτό το μέρος της διεύθυνσης ως δυναμικό. Σε αυτήν την περίπτωση όλα τα αιτήματα αυτού του τύπου θα επεξεργάζεται ένα κοινό αρχείο page.jsx.

Για να δημιουργήσετε μια δυναμική παράμετρο, πρέπει το όνομα του αντίστοιχου φακέλου να το βάλετε σε αγκύλες. Στην περίπτωσή μας, αυτή θα είναι η ακόλουθη δομή φακέλων:

/app//users//[id]/

Ας δημιουργήσουμε το αντίστοιχο στοιχείο:

app/users/[id]/page.jsxexport default function User() {
  return <p>
    χρήστης
  </p>;
}

Σε αυτήν την περίπτωση, η παράμετρος που ορίσατε θα αποθηκεύεται σε ένα ειδικό αντικείμενο params. Ας εμφανίσουμε την τιμή αυτής της παραμέτρου:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <p>
    χρήστης {params.id}
  </p>;
}

Задание 1

Δημιουργήστε μια διαδρομή που να χειρίζεται διευθύνσεις της μορφής /city/:name, όπου αντί για :name μπορεί να είναι οποιοδήποτε string.

Задание 2

Δημιουργήστε μια διαδρομή που να χειρίζεται διευθύνσεις της μορφής /show/:country/:city, όπου αντί για :country και :city μπορεί να είναι οποιοδήποτε string.

Задание 3

Δημιουργήστε μια διαδρομή που να χειρίζεται διευθύνσεις της μορφής /post/:id, όπου αντί για :id μπορεί να είναι οποιοσδήποτε αριθμός.

Ας υποθέσουμε ότι υπάρχει ο ακόλουθος πίνακας:

page.jsxlet posts = [
  'δημοσίευση1',
  'δημοσίευση2',
  'δημοσίευση3',
  'δημοσίευση4',
  'δημοσίευση5',
];

export default function Post() {
  
}

Κάντε έτσι ώστε ανάλογα με την τιμή της παραμέτρου id στη σήμανση του στοιχείου να εμφανίζεται η αντίστοιχη δημοσίευση.

Задание 4

Δημιουργήστε μια διαδρομή που να χειρίζεται διευθύνσεις της μορφής /prod/:id, όπου αντί για :id μπορεί να είναι οποιοσδήποτε αριθμός.

Ας υποθέσουμε ότι υπάρχει ο ακόλουθος πίνακας:

page.jsxlet prods = [
  {
    id: 1,
    name: 'προϊόν1',
    cost: 100,
  },
  {
    id: 2,
    name: 'προϊόν2',
    cost: 200,
  },
  {
    id: 3,
    name: 'προϊόν3',
    cost: 300,
  },
];

export default function Prod() {
  
}

Κάντε έτσι ώστε ανάλογα με την τιμή της παραμέτρου id στη σήμανση του στοιχείου να εμφανίζεται το αντίστοιχο προϊόν.