Gabim i parametrit të pavlefshëm në NextJS

Në mësimet e mëparshme ne kthyem 404 gabim në rastin kur rruga për këtë URL nuk u gjet. Megjithatë, në rastin e një rruge dinamike mund të ketë një situatë ku rruga ekziston, por vlera e parametrit është e gabuar.

Le ta shohim me një shembull. Le të themi se kemi një rrugë të formës së mëposhtme: /user/:id.

Le të themi gjithashtu se kemi një objekt me përdorues:

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

Le të themi se duam të shfaqim përdoruesin sipas ID-së së tij:

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

Është e qartë se ID-ja në URL mund të jetë jo çfarëdo, por vetëm një nga çelësat e objektit tonë. Përpjekja për të hyrë në një adresë që nuk ekziston /user/6 duhet të çojë në faktin që do të kthehet një gabim. Le të rregullojmë kodin e komponentit tonë dhe të kthejmë tekstin me gabim:

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

Kjo, megjithatë, nuk mjafton. Në fund të fundit, në këtë rast ne jemi duke u drejtuar në një faqe që nuk ekziston, prandaj duhet të kthejmë statusin HTTP 404. Kjo bëhet duke përdorur funksionin e veçantë notFound, të integruar në NextJS.

Le ta importojmë këtë funksion:

import { notFound } from 'next/navigation';

Dhe tani do ta thirrim atë në rastin kur vlera e parametrit është e pavlefshme:

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

Kodi i plotë i komponentit tonë do të duket si më poshtë:

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

Zgjidheni problemin e përshkruar në komponentët tuaj.