NextJS-এ অবৈধ প্যারামিটার ত্রুটি

পূর্ববর্তী পাঠগুলোতে, আমরা 404 ত্রুটি দিয়েছি যখন 해당 URL-এর জন্য কোনো রুট খুঁজে পাওয়া যায়নি। যাইহোক, ডায়নামিক রুটের ক্ষেত্রে এমন পরিস্থিতি হতে পারে যেখানে রুটটি বিদ্যমান, কিন্তু প্যারামিটারের মানটি ভুল।

আসুন একটি উদাহরণ দেখি। ধরুন আমাদের কাছে নিম্নলিখিত ধরনের একটি রুট আছে: /user/:id।

আরও ধরুন আমাদের কাছে ব্যবহারকারীদের একটি অবজেক্ট আছে:

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

ধরুন আমরা ব্যবহারকারীকে তার আইডি অনুসারে দেখাতে চাই:

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

স্পষ্টতই, 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 দিতে হবে। এটি করা হয় NextJS-তে内置 বিশেষ ফাংশন notFound ব্যবহার করে।

আসুন এই ফাংশনটি ইম্পোর্ট করি:

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