Napaka neveljavnega parametra v NextJS

V prejšnjih lekcijah smo vrnili 404 napako v primeru, ko pot za dani URL ni bila najdena. Vendar pa lahko pri dinamični poti pride do situacije, ko pot obstaja, vendar je vrednost parametra napačna.

Poglejmo si primer. Recimo, da imamo pot naslednje oblike: /user/:id.

Recimo, da imamo tudi objekt z uporabniki:

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

Recimo, da želimo prikazati uporabnika po njegovem ID-ju:

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

Očitno je, da ID v URL-ju ne more biti poljuben, ampak le eden od ključev našega objekta. Poskus dostopa na neobstoječi naslov /user/6 bi moral povzročiti, da se vrne napaka. Popravimo kodo našega komponenta in prikažimo besedilo z napako:

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

Toda to ni dovolj. Kajti v tem primeru dostopamo do neobstoječe strani, kar pomeni, da moramo vrniti HTTP status 404. To naredimo s posebno funkcijo notFound, ki je vgrajena v NextJS.

Uvažajmo to funkcijo:

import { notFound } from 'next/navigation';

In sedaj jo bomo klicali v tistem primeru, ko je vrednost parametra neveljavna:

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

Popolna koda našega komponenta bo videti takole:

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

Rešite opisani problem v vaših komponentah.