Érvénytelen paraméter hiba a NextJS-ben

Az előző leckékben akkor adtunk ki 404 hibát, amikor az adott URL-hez tartozó útvonal nem található. Azonban dinamikus útvonal esetén előfordulhat olyan helyzet, amikor az útvonal létezik, de a paraméter értéke helytelen.

Nézzük ezt egy példán. Tegyük fel, hogy van egy a következő alakú útvonalunk: /user/:id.

Tegyük fel továbbá, hogy van egy objektumunk a felhasználókkal:

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

Tegyük fel, hogy a felhasználót az azonosítója alapján szeretnénk megjeleníteni:

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

Nyilvánvaló, hogy az URL-ben lévő azonosító nem lehet tetszőleges, hanem csak az objektumunk kulcsai közül valamelyik. A nem létező /user/6 címre történő látogatás azzal kellene, hogy járjon, hogy hibaüzenet jelenik meg. Javítsuk a komponensünk kódját, és jelenítsünk meg egy hibaüzenetet:

export default function User({ params }) {
	if (users[params.id]) {
		return <p>
			{ users[params.id] }
		</p>;
	} else {
		return <p>
			a felhasználó nem található
		</p>;
	}
}

Ez azonban nem elég. Hiszen ebben az esetben egy nem létező oldalt töltünk be, ami azt jelenti, hogy a 404 HTTP állapotkódot kell visszaadnunk. Ezt a NextJS-be épített notFound speciális függvénnyel tehetjük meg.

Importáljuk ezt a függvényt:

import { notFound } from 'next/navigation';

Most pedig hívjuk meg akkor, amikor a paraméter értéke helytelen:

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

A komponensünk teljes kódja a következőképpen fog kinézni:

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

Oldja meg az ismertetett problémát a saját komponenseiben.