NextJSda noto‘g‘ri parametr xatosi

Oldingi darslarda biz 404 xatosini ushbu URL uchun yo‘l topilmaganda qaytardik. Biroq, dinamik yo‘l uchun yo‘l mavjud bo‘lgan, lekin parametr qiymati noto‘g‘ri bo‘lgan holat yuzaga kelishi mumkin.

Keling, bir misolni ko‘rib chiqaylik. Faraz qilaylik, bizda quyidagicha yo‘l mavjud: /user/:id.

Shuningdek, faraz qilaylik, bizda foydalanuvchilar ob'ekti mavjud:

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

Faraz qilaylik, biz foydalanuvchini uning id bo‘yicha ko‘rsatmoqchimiz:

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

Shubhasiz, URLdagi id ixtiyoriy emas, balki bizning ob'ektimiz kalitlaridan biri bo‘lishi kerak. Mavjud bo‘lmagan manzilga murojaat qilish /user/6 xatolikni keltirib chiqarishi kerak. Keling, komponentimiz kodini tuzatamiz va xato matnini chiqaramiz:

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

Biroq, bu yetarli emas. Axir, bu holda biz mavjud bo‘lmagan sahifaga murojaat qilyapmiz, shuning uchun HTTP 404 statusini qaytarishimiz kerak. Bunga NextJSga o‘rnatilgan maxsus notFound funksiyasi yordamida erishiladi.

Keling, ushbu funksiyani import qilaylik:

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

Endi esa parametr qiymati noto‘g‘ri bo‘lganda uni chaqiramiz:

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

Bizning komponentimizning to‘liq kodi quyidagicha ko‘rinadi:

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