Грешка за невалиден параметар во 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>;
}

Очигледно е дека ID-то во URL-то не може да биде кој било, туку само еден од клучевите на нашиот објект. Обидот за пристап на непостоечка адреса /user/6 треба да резултира со грешка. Да го поправиме кодот на нашиот компонент и да испечатиме текст со грешка:

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

Ова, сепак, не е доволно. Бидејќи во овој случај се обидуваме да пристапиме на непостоечка страница, што значи дека треба да вратиме HTTP статус 404. Ова се прави со помош на специјална функција notFound, вградена во NextJS.

Да ја импортираме оваа функција:

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

Решете ја опишаната проблематика во вашите компоненти.