NextJS'te Geçersiz Parametre Hatası

Önceki derslerde, belirli bir URL için rota bulunamadığında 404 hatasını vermiştik. Ancak, dinamik bir rotada, rotanın var olduğu ancak parametre değerinin yanlış olduğu bir durum olabilir.

Bir örnek üzerinden inceleyelim. Aşağıdaki gibi bir rotamız olduğunu varsayalım: /user/:id.

Ayrıca şu kullanıcı nesnemizin olduğunu varsayalım:

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

Kullanıcıyı id'sine göre göstermek istediğimizi varsayalım:

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

Açıktır ki, URL'deki id herhangi biri olamaz, sadece nesnemizin anahtarlarından biri olmalıdır. Var olmayan bir adrese /user/6 erişme girişimi, bir hatanın verilmesiyle sonuçlanmalıdır. Bileşenimizin kodunu düzelterek hata metnini gösterelim:

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

Ancak, bu yeterli değildir. Çünkü bu durumda, var olmayan bir sayfaya erişiyoruz, dolayısıyla HTTP durumu 404 verilmelidir. Bu, NextJS'e dahil olan özel bir notFound fonksiyonu kullanılarak yapılır.

Bu fonksiyonu içe aktaralım:

import { notFound } from 'next/navigation';

Şimdi, parametre değeri geçersiz olduğunda onu çağıralım:

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

Bileşenimizin tam kodu aşağıdaki gibi olacaktır:

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

Açıklanan sorunu kendi bileşenlerinizde çözün.