Σφάλμα Μη Έγκυρης Παραμέτρου στο NextJS

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

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε μια διαδρομή της ακόλουθης μορφής: /user/:id.

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

app/user/[id]/page.jsxlet users = {
  1: 'user1',
  2: 'user2',
  3: 'user3',
  4: 'user4',
  5: 'user5',
};

Ας πούμε ότι θέλουμε να εμφανίζουμε τον χρήστη βάσει του id του:

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

Προφανώς, το id στη URL δεν μπορεί να είναι οποιοδήποτε, αλλά μόνο ένα από τα κλειδιά του αντικειμένου μας. Η προσπάθεια πρόσβασης σε μη υπάρχουσα διεύθυνση /user/6 θα πρέπει να οδηγεί στο να εκδίδεται σφάλμα. Ας διορθώσουμε τον κώδικα του στοιχείου μας και να εμφανίσουμε ένα κείμενο σφάλματος:

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

Αυτό, ωστόσο, δεν είναι αρκετό. Εξάλλου, σε αυτήν την περίπτωση προσπαθούμε να αποκτήσουμε πρόσβαση σε μια μη υπάρχουσα σελίδα, πράγμα που σημαίνει ότι πρέπει να επιστρέψουμε την κατάσταση HTTP 404. Αυτό γίνεται χρησιμοποιώντας μια ειδική λειτουργία notFound, ενσωματωμένη στο NextJS.

Ας εισάγουμε αυτή τη λειτουργία:

app/user/[id]/page.jsximport { notFound } from 'next/navigation';

Και τώρα θα την καλούμε στην περίπτωση που η τιμή της παραμέτρου είναι εσφαλμένη:

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

Ο πλήρης κώδικας του στοιχείου μας θα μοιάζει ως εξής:

app/user/[id]/page.jsximport { notFound } from 'next/navigation';

let users = {
  1: 'user1',
  2: 'user2',
  3: 'user3',
  4: 'user4',
  5: 'user5',
};

export default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return notFound();
  }
}