Advanced · Level 10: Next.js App RouterAdvanced70 menitBahasa Indonesia

Dynamic Routes

Menggunakan folder dynamic segment seperti [slug] untuk page detail yang URL-nya ditentukan data atau user input.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan tujuan dynamic segment [slug]
Membaca params pada App Router page saat ini
Membedakan dynamic segment dari folder URL biasa

Next.jsRoutingDynamic RoutesParams

Isi lesson

5 blok

1.
Satu page template untuk banyak URL detailBelum selesaiWajib
2.
app/courses/[slug]/page.tsx membaca slug dari paramsBelum selesaiWajib
3.
Dynamic segment bukan nama folder literalBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Satu page template untuk banyak URL detail

Wajib

Dynamic route digunakan ketika bagian URL belum diketahui saat kamu menulis folder tree. Contoh umum adalah course detail, blog post, atau product page. Folder [slug] berarti nilai segment itu akan tersedia sebagai params ketika route dibuka. app/courses/[slug]/page.tsx dapat menangani /courses/react-basics dan /courses/next-routing dengan page template yang sama.

Pada App Router Next.js saat ini, params pada page dapat diterima sebagai Promise. Page async menunggu params lalu membaca slug. Jangan masuk ke catch-all segment, static generation, atau data fetching dahulu; tujuan lesson ini hanya memahami hubungan folder [slug], URL, dan params.

Bagian ini memengaruhi progres lesson.

app/courses/[slug]/page.tsx membaca slug dari params

Wajib

tsx

type CoursePageProps = {
  params: Promise<{ slug: string }>;
};

export default async function CoursePage({ params }: CoursePageProps) {
  const { slug } = await params;

  return (
    <main>
      <h1>Course: {slug}</h1>
      <p>Route ini menggunakan satu page template untuk banyak course.</p>
    </main>
  );
}

Nama folder [slug] menjadi nama property slug. Untuk URL /courses/next-routing, nilai slug adalah next-routing. Page tidak perlu membuat satu file baru untuk setiap course selama struktur UI detailnya sama.

Bagian ini memengaruhi progres lesson.

Peringatan

Wajib

Dynamic segment bukan nama folder literal

Folder bernama slug tanpa tanda kurung siku akan membuat URL /courses/slug secara literal. Hanya [slug] yang memberi tahu Next.js bahwa segment tersebut dinamis. Gunakan nama params yang menjelaskan data yang diharapkan, misalnya [courseSlug] atau [productId] bila itu membuat route lebih mudah dibaca.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Build course slug page

Lengkapi app/courses/[slug]/page.tsx agar membaca params.slug dan menampilkan course detail sesuai URL dynamic segment.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis5 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

Folder [slug] membuat dynamic segment yang nilainya berasal dari URL.
params memberi page akses ke nilai segment tersebut.
Satu page template dapat menangani banyak URL detail dengan struktur yang sama.
Berikutnya, kamu akan menggunakan route groups untuk organisasi folder tanpa menambah segment URL.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Satu page template untuk banyak URL detail.

Memuat progres Review module