Chyba neplatného parametra v NextJS

V predchádzajúcich lekciách sme vracali 404 chybu v prípade, keď route pre danú URL nebol nájdený. Avšak, v prípade dynamického route môže nastať situácia, kedy route existuje, ale hodnota parametra je nesprávna.

Pozrime sa na príklad. Predpokladajme, že máme route nasledovného tvaru: /user/:id.

Predpokladajme tiež, že máme objekt s používateľmi:

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

Predpokladajme, že chceme zobraziť používateľa podľa jeho ID:

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

Je zrejmé, že ID v URL nemôže byť ľubovoľné, ale iba jedno z kľúčov nášho objektu. Pokus o prístup na neexistujúcu adresu /user/6 by mal viesť k tomu, že sa vráti chyba. Opravme kód nášho komponentu a vráťme 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 nie je dostatočné. Veď v tomto prípade sa pokúšame o prístup k neexistujúcej stránke, a preto by sme mali vrátiť HTTP status 404. To sa vykonáva pomocou špeciálnej funkcie notFound, ktorá je vstavaná v NextJS.

Importujme túto funkciu:

import { notFound } from 'next/navigation';

A teraz ju zavolajme v prípade, keď je hodnota parametra nekorektná:

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

Úplný kód nášho komponentu bude vyzerať nasledovne:

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

Vyriešte opísaný problém vo vašich komponentoch.