Kesalahan Parameter Tidak Valid di NextJS

Dalam pelajaran sebelumnya, kita memberikan kesalahan 404 dalam kasus ketika rute untuk URL tersebut tidak ditemukan. Namun, dalam kasus rute dinamis, mungkin ada situasi di mana rute ada, tapi nilai parameternya salah.

Mari kita lihat contohnya. Misalkan kita memiliki rute dengan bentuk berikut: /user/:id.

Misalkan kita juga memiliki objek berisi pengguna:

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

Misalkan kita ingin menampilkan pengguna berdasarkan id-nya:

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

Jelas bahwa id dalam URL bisa saja bukan sembarang nilai, melainkan hanya salah satu kunci dari objek kita. Upaya mengakses alamat yang tidak ada /user/6 seharusnya mengakibatkan kesalahan ditampilkan. Mari kita perbaiki kode komponen kita dan tampilkan teks kesalahan:

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

Namun, ini belum cukup. Karena dalam kasus ini kita mengakses halaman yang tidak ada, yang berarti kita harus mengembalikan status HTTP 404. Hal ini dilakukan dengan menggunakan fungsi khusus notFound, yang sudah built-in di NextJS.

Mari impor fungsi tersebut:

import { notFound } from 'next/navigation';

Dan sekarang kita akan memanggilnya dalam kasus ketika nilai parameter tidak valid:

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

Kode lengkap komponen kita akan terlihat seperti berikut:

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

Selesaikan masalah yang dijelaskan dalam komponen Anda.