Praktik Folder [Id] dan Cara Membuat Dynamic Routing Next Js

Ditulis oleh Next.js

Cara membuat dynamic routing Next.js di App Router adalah membuat folder dengan tanda kurung siku, contohnya app/blog/[id]/page.tsx, lalu membaca nilainya lewat params di Server Component. Kesalahan yang paling sering terjadi adalah menulis params.id tanpa menunggu promise di Next.js versi terbaru, atau mengira query string seperti ?page=2 sebagai bagian dari folder dinamis.

Pola Folder dan File untuk Route Dinamis

App Router membaca struktur folder sebagai URL. Folder biasa menghasilkan static route, folder [nama] menghasilkan dynamic route.

  • app/blog/page.tsx melayani /blog.
  • app/blog/[slug]/page.tsx melayani /blog/hello-dunia, /blog/nextjs-routing, dan seterusnya.
  • ?q=nextjs bukan route, melainkan search params yang dibaca terpisah.

Contoh pembacaan params di Server Component:

// app/blog/[slug]/page.tsx
export default async function BlogDetail({ params }) {
  const { slug } = await params;
  return <h1>Artikel: {slug}</h1>;
}

Langkah Membuat Dynamic Routing sampai Bisa Diakses

  1. Buat folder dinamis, misalnya app/product/[id], lalu tambahkan page.tsx di dalamnya.
  2. Baca params sebagai async sesuai versi Next.js yang dipakai, jangan langsung destructure tanpa await bila bertipe promise.
  3. Buat link dinamis dari halaman daftar memakai komponen Link.
  4. Jalankan npm run dev dan uji URL seperti /product/10 dan /product/sepatu-merah.
  • /product/1 cocok untuk ID database.
  • /product/sepatu-lari-merah cocok untuk slug SEO.
  • /blog/2026/cara-routing butuh nested route [tahun]/[slug].
import Link from "next/link";

export default function ProductList() {
  const products = [{ id: "1" }, { id: "2" }];
  return products.map((p) => (
    <Link key={p.id} href={`/product/${p.id}`}>
      Lihat {p.id}
    </Link>
  ));
}

BACA JUGA:

Tabel Pola Routing dan Kapan Dipakai

Pola Fungsi Catatan
[id] Satu segmen dinamis Ideal untuk detail produk atau artikel
[…slug] Beberapa segmen wajib Cocok untuk kategori bertingkat
[[…slug]] Beberapa segmen opsional Bisa melayani induk dan anak sekaligus

Untuk halaman yang datanya sudah diketahui saat build, gunakan generateStaticParams agar Next.js membuatkan HTML tiap slug lebih awal.

FAQ

Apakah dynamic routing butuh use client?

Tidak. Halaman [id] bisa tetap Server Component kecuali memakai state, efek, atau event browser.

Bagaimana membaca search params di App Router?

Gunakan prop searchParams di Server Component atau hook useSearchParams di Client Component.

Kenapa halaman [id] menampilkan 404?

Umumnya nama folder salah, file page.tsx tidak ada di dalam folder tersebut, atau pemanggilan notFound() terpicu karena data kosong.

Artikel Terkait