Belajar Next.js App Router #4: Dynamic Route

• Apa Itu Dynamic Route?
• Membuat Dynamic Route di App Router
• Mengakses Parameter Dynamic Route
• Struktur URL pada Dynamic Route
• Dynamic Route Bersarang (Nested)
• Kesimpulan

Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah mempelajari route segment dan navigasi dasar pada Next.js App Router. Pada artikel ini, kita akan melanjutkan ke materi yang sangat sering digunakan dalam aplikasi nyata, yaitu dynamic route.

Dynamic route memungkinkan kita membuat halaman dengan URL yang bersifat dinamis, misalnya halaman detail produk, detail artikel, atau detail user, tanpa harus membuat file halaman satu per satu secara manual.

Apa Itu Dynamic Route?

Dynamic route adalah route yang memiliki parameter dinamis pada URL. Parameter ini biasanya digunakan untuk menampilkan data berdasarkan nilai tertentu, seperti ID atau slug.

Sebagai contoh, URL berikut merupakan dynamic route:

/blog/nextjs-app-router

Pada URL tersebut, bagian nextjs-app-router adalah nilai dinamis yang bisa berubah-ubah, tergantung data yang ditampilkan.

Membuat Dynamic Route di App Router

Pada App Router, dynamic route dibuat dengan menggunakan nama folder yang dibungkus tanda kurung siku. Sebagai contoh, kita akan membuat halaman detail produk dengan parameter slug.

Silahkan teman-teman buat struktur folder berikut:

app/products/[slug]/page.tsx

Nama folder [slug] menandakan bahwa bagian tersebut adalah parameter dinamis.

Mengakses Parameter Dynamic Route

Sekarang kita isi file page.tsx pada folder [slug] dengan kode berikut:

export default async function ProductDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {

  // destructure slug
  const { slug } = await params

  return (
    <div className="flex flex-col items-center pt-50 justify-center">
      <h1>Detail Product</h1>
      <p>
        Ini adalah halaman:{" "}
        <span className="text-red-500 font-semibold">{slug}</span>
      </p>
    </div>
  )
}

Parameter dynamic route dapat diakses melalui properti params yang otomatis dikirim oleh Next.js ke komponen halaman.

Jika kita membuka URL berikut di browser: http://localhost:3000/products/laptop-gaming. Maka halaman akan menampilkan nilai slug laptop-gaming.

Struktur URL pada Dynamic Route

Untuk memperjelas, berikut hubungan antara struktur folder dan URL yang dihasilkan:

app/products/[slug]/page.tsx

Akan menghasilkan URL:

/products/{slug}

Nilai {slug} bisa berupa apa saja, seperti iphone-15, mouse-wireless, atau nilai lainnya sesuai kebutuhan aplikasi.

Dynamic Route Bersarang (Nested)

Dynamic route juga bisa dikombinasikan dengan nested routing.

Sebagai contoh, struktur berikut:

app/blog/[category]/[slug]/page.tsx

Akan menghasilkan URL:

/blog/teknologi/nextjs-app-router

Pada kasus ini, kita akan menerima dua parameter sekaligus, yaitu category dan slug, yang keduanya bisa diakses melalui params.

Kesimpulan

Pada artikel ini, kita telah mempelajari konsep dynamic route pada Next.js App Router, mulai dari cara membuat folder dengan parameter dinamis hingga mengakses nilainya melalui params.

Pada artikel selanjutnya, kita akan membahas layout dan bagaimana Next.js App Router mengelola tampilan menggunakan layout.tsx serta konsep nested layout.

Terima Kasih