Chyba neplatného parametru v NextJS

V předchozích lekcích jsme vraceli 404 chybu v případě, kdy route pro danou URL nebyl nalezen. Avšak v případě dynamické route může nastat situace, kdy route existuje, ale hodnota parametru je nesprávná.

Podívejme se na příklad. Předpokládejme, že máme route následujícího typu: /user/:id.

Předpokládejme také, že máme objekt s uživateli:

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

Předpokládejme, že chceme zobrazit uživatele podle jeho id:

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

Je zřejmé, že id v URL nemůže být libovolné, ale pouze jedno z klíčů našeho objektu. Pokus o přístup na neexistující adresu /user/6 by měl vést k tomu, že bude vrácena chyba. Pojďme opravit kód naší komponenty a vrátit text s chybou:

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

To však nestačí. V tomto případě se totiž jedná o neexistující stránku, a tedy bychom měli vrátit HTTP status 404. To se provádí pomocí speciální funkce notFound, vestavěné v NextJS.

Pojďme importovat tuto funkci:

import { notFound } from 'next/navigation';

A nyní ji budeme volat v případě, kdy je hodnota parametru nekorektní:

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

Úplný kód naší komponenty bude vypadat následovně:

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

Vyřešte popsaný problém ve vašich komponentách.