Грешка недозвољеног параметра у 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();
	}
}

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