Ugyldig parameterfeil i NextJS

I tidligere leksjoner returnerte vi 404 feil i tilfeller der ruten for den gitte URL-en ikke ble funnet. Imidlertid, med dynamiske ruter kan det oppstå situasjoner der ruten eksisterer, men parameterverdien er ugyldig.

La oss se på et eksempel. Anta at vi har en rute som ser slik ut: /user/:id.

Anta at vi også har et objekt med brukere:

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

Anta at vi ønsker å vise brukeren basert på deres id:

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

Det er åpenbart at id-en i URL-en ikke kan være hvilken som helst, men kun en av nøklene i objektet vårt. Et forsøk på å gå til en ikke-eksisterende adresse /user/6 bør resultere i en feil. La oss rette opp koden i komponenten vår og vise en feilmelding:

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

Dette er imidlertid ikke nok. For i dette tilfellet prøver vi å nå en ikke-eksisterende side, og bør derfor returnere HTTP-status 404. Dette gjøres ved hjelp av en spesiell funksjon notFound, som er innebygd i NextJS.

La oss importere denne funksjonen:

import { notFound } from 'next/navigation';

Og la oss kalle den når parameterverdien er ugyldig:

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

Den fullstendige koden for komponenten vår vil se slik ut:

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

Løs det beskrevne problemet i dine komponenter.