არასწორი პარამეტრის შეცდომა NextJS-ში

წინა გაკვეთილებში ჩვენ ვუბრუნებდით 404 შეცდომას იმ შემთხვევაში, როდესაც მოცემული URL-ისთვის route არ იყო ნაპოვნი. თუმცა, დინამიური route-ის შემთხვევაში შეიძლება იყოს ასეთი სიტუაცია, როდესაც route არსებობს, მაგრამ პარამეტრის მნიშვნელობა არასწორია.

მოდით შევხედოთ მაგალითს. დავუშვათ, გვაქვს შემდეგი სახის მარშრუტი: /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>;
}

ცხადია, რომ URL-ში id შეიძლება არ იყოს ნებისმიერი, არამედ მხოლოდ ჩვენი ობიექტის გასაღებებიდან ერთ-ერთი. არარსებულ მისამართზე მიმართვის მცდელობა, მაგალითად /user/6, უნდა გამოიწვიოს შეცდომის გამოტანა. მოდით შევასწოროთ ჩვენი კომპონენტის კოდი და გამოვიტანოთ ტექსტი შეცდომით:

app/user/[id]/page.jsxexport default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return <p>
      მომხმარებელი არ მოიძებნა
    </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();
  }
}