Ошибка недопустимого параметра в NextJS

В предыдущих уроках мы отдавали 404 ошибку в том случае, когда роут для данного URL не был найден. Однако, в случае динамического роута может быть такая ситуация, когда роут существует, но значение параметра неправильное.

Давайте посмотрим на примере. Пусть у нас есть маршрут следующего вида: /user/:id.

Пусть у нас также есть объект с юзерами:

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

Пусть мы хотим показывать юзера по его айди:

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

Очевидно, что айди в 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();
	}
}

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