Erreur de paramètre non valide dans NextJS

Dans les leçons précédentes, nous renvoyions 404 erreur dans le cas où la route pour cette URL n'était pas trouvée. Cependant, dans le cas d'une route dynamique, il peut y avoir une situation où la route existe, mais la valeur du paramètre est incorrecte.

Regardons un exemple. Supposons que nous ayons une route de la forme suivante : /user/:id.

Supposons que nous ayons également un objet avec des utilisateurs :

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

Supposons que nous voulions afficher l'utilisateur par son id :

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

Il est évident que l'id dans l'URL peut être non pas n'importe lequel, mais seulement l'une des clés de notre objet. Tenter d'accéder à une adresse inexistante /user/6 devrait conduire au fait qu'une erreur sera renvoyée. Corrigeons le code de notre composant et affichons un texte d'erreur :

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

Cependant, cela ne suffit pas. En effet, dans ce cas, nous accédons à une page inexistante, et devons donc renvoyer le statut HTTP 404. Cela se fait à l'aide d'une fonction spéciale notFound, intégrée dans NextJS.

Importons cette fonction :

import { notFound } from 'next/navigation';

Et maintenant, nous l'appellerons dans le cas où la valeur du paramètre est incorrecte :

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

Le code complet de notre composant ressemblera à ceci :

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

Résolvez le problème décrit dans vos composants.