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

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