NextJS'те жараксыз параметр катасы

Мурунку сабактарда биз берген URL үчүн маршрут табылбаган учурда 404 катасын кайтарганбыз. Бирок, динамикалык маршрутта маршрут бар болсо да, параметрин мааниси туура эмес болушу мүмкүн.

Келгиле, мисал аркылуу карайлы. Бизде төмөнкүдөй маршрут бар деп коёлу: /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>
			колдонуучу табылган жок
		</p>;
	}
}

Бирок, бул жетишсиз. Себеби, бул учурда биз жок барагын ачып жатабыз, демек 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();
	}
}

Сипатталган маселени өз компоненттериңизде чечиңиз.