Rute Dinamis dengan [slug]

Masalahnya

Toko online punya ratusan produk: /produk/sepatu, /produk/tas, dan seterusnya. Tidak mungkin membuat ratusan folder.

Solusi: nama folder dalam kurung siku

app/produk/[slug]/page.js

Folder [slug] berarti "bagian ini bisa diisi apa saja". Nilainya dikirim ke halaman lewat params.

export default function ProdukPage({ params }) {
  return <h1>Produk: {params.slug}</h1>;
}

Catatan versi: pada Next.js 15 ke atas, di Server Component bernilai params berupa Promise sehingga dibaca dengan const { slug } = await params;. Dalam latihan ini kita memakai bentuk sederhana agar fokus pada idenya.