NextJSда ғайриёққа қуйилган параметр хатоси

Олдинги дарсларда биз 404 хатосини ушбу URL учун йўл топилмаган холда чиқарган эдик. Аммо, динамик йўл учун йўл мавжуд бўлганида ҳам, параметрнинг қиймати нотўғри бўлган ҳолат бўлиши мумкин.

Келгила, мисолда кўрамиз. Бизда қуйидаги кўринишдаги йўл мавжуд деб фараз қилайлик: /user/:id.

Шунингдек, бизда фойдаланувчилар билан объект мавжуд деб фараз қилайлик:

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

Биз унинг ID си бўйича фойдаланувчини кўрсатмоқчи бўлсак:

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

Аниқки, URL даги ID ихтиёрий эмас, балки бизнинг объектимизнинг калитларининг бири бўлиши керак. Мавжуд бўлмаган манзилга /user/6 мурожаат қилиш хато билан якунланиши керак. Келгила, бизнинг компонентимизнинг кодини тўғрилаб, хатолик матнини чиқарайлик:

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

Бирок, бу етарли эмас. Чунки бу ҳолатда биз мавжуд бўлмаган саҳифага мурожаат қиляпмиз, шаuning учун биз HTTP статуси 404 ни қайтаришимиз керак. Бу NextJS га интеграция қилингган notFound махсус функцияси ёрдамида амалга оширилади.

Келгила, бу функцияни импорт қилайлик:

import { notFound } from 'next/navigation';

Энди эса параметрнинг қиймати нотўғри бўлган ҳолатда уни чақирайлик:

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

Бизнинг компонентимизнинг тўлиқ коди қуйидаги кўринишда бўлади:

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

Ўз компонентларингизда тавсифланган муаммони ечинг.