Dynamic Route: URL dengan Parameter

Masalahnya

Blog punya ratusan artikel. Tidak mungkin membuat folder satu per satu untuk setiap artikel. Solusinya: dynamic route, satu template halaman untuk semua artikel.

Cara kerja

Buat folder dengan nama dalam kurung siku: app/blog/[slug]/page.tsx. Bagian [slug] bisa diisi apa saja, misal /blog/belajar-nextjs atau /blog/tips-css.

Membaca parameter

Parameter tersedia lewat props params. Di App Router, params adalah Promise jadi harus di-await:

// app/blog/[slug]/page.tsx
const artikel: Record<string, { judul: string; isi: string }> = {
  "belajar-nextjs": { judul: "Belajar Next.js", isi: "Next.js itu seru..." },
  "tips-css": { judul: "Tips CSS", isi: "Gunakan flexbox..." },
};

export default async function Artikel({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const data = artikel[slug];

  if (!data) return <h1>Artikel tidak ditemukan</h1>;

  return (
    <article>
      <h1>{data.judul}</h1>
      <p>{data.isi}</p>
    </article>
  );
}

Catch-all route

Butuh lebih dari satu segmen dinamis? Pakai [...slug], misal app/docs/[...slug]/page.tsx menangkap /docs/a, /docs/a/b, dan seterusnya. params.slug akan berupa array string.

Tips praktis

Untuk keamanan, validasi nilai slug sebelum dipakai: pastikan hanya berisi huruf, angka, dan strip. Slug aneh bisa menjadi celah injection kalau langsung dipakai di query database. Untuk halaman populer seperti artikel pilihan, daftarkan lewat generateStaticParams agar di-prerender saat build dan terbuka super cepat.

Kesalahan umum pemula

• Lupa await params. Di Next.js 14+, params adalah Promise. Mengakses params.slug langsung tanpa await menghasilkan error atau nilai undefined.
• Tidak menangani slug yang tidak ada. Selalu cek apakah data ditemukan, lalu tampilkan pesan atau panggil notFound(). Jangan biarkan halaman crash.
• Memakai dynamic route untuk halaman statis. Kalau halamannya cuma 3 dan jarang berubah, buat manual saja. Dynamic route untuk data yang banyak atau berubah.

Latihan singkat

1. Buat dynamic route /user/[username] yang menampilkan profil dummy dari objek data.
2. Tambahkan penanganan untuk username yang tidak terdaftar: tampilkan pesan ramah, bukan error.

Rangkuman

• Folder [slug] membuat satu template untuk banyak URL dinamis seperti artikel blog.
• params adalah Promise di Next.js 14+, jadi harus di-await.
• Selalu tangani slug yang tidak ditemukan dengan pesan ramah atau notFound().
• [...slug] menangkap banyak segmen sekaligus sebagai array.

Catatan teknis: Untuk SEO, daftarkan semua nilai slug yang valid lewat fungsi generateStaticParams. Tanpa ini, halaman dinamis tetap jalan tapi tidak di-prerender saat build, dan crawler bisa melewatkannya.