NextJS-də Etibarsız Parametr Xətası

Əvvəlki dərslərdə biz, müvafiq URL üçün marşrut tapılmadığı zaman 404 xətasını qaytırdıq. Lakin, dinamik marşrutda belə bir vəziyyət yarana bilər ki, marşrut mövcud olsun, amma parametrin dəyəri səhv olsun.

Gəlin bir nümunəyə baxaq. Tutaq ki, bizim aşağıdakı kimi bir marşrutumuz var: /user/:id.

Tutaq ki, bizim həmçinin istifadəçilər olan bir obyektimiz var:

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

Tutaq ki, biz istifadəçini onun id-si ilə göstərmək istəyirik:

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

Aydındır ki, URL-dəki id istənilən deyil, yalnız obyektimizin açarlarından biri ola bilər. Mövcud olmayan ünvana /user/6 müraciət etmə cəhdi xətanın baş verməsinə səbəb olmalıdır. Gəlin komponentimizin kodunu düzəldək və xəta mətnini göstərək:

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

Lakin, bu kifayət deyil. Axı bu halda biz mövcud olmayan səhifəyə daxil oluruq, deməli HTTP statusu 404 qaytarmalıyıq. Bu, NextJS-də daxili olan xüsusi notFound funksiyası vasitəsilə edilir.

Gəlin bu funksiyanı import edək:

import { notFound } from 'next/navigation';

İndi isə parametrin dəyəri yanlış olduqda onu çağıracayıq:

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

Komponentimizin tam kodu aşağıdakı kimi olacaq:

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

Təsvir olunan problemi komponentlərinizdə həll edin.