File-Based Routing: Static, Dynamic & Catch-All Routes — Belajar Next.js

🎯 Poin-Poin Utama Modul Ini:

Struktur folder di app/ menentukan URL endpoint secara otomatis
Dynamic Route dengan kurung siku [id] untuk parameter dinamis
Route Groups (groupName) mengelompokkan file tanpa menambah segment URL

🗺️ Konsep File-Based Routing App Router

Setiap folder di dalam app/ mewakili segmen URL. File page.tsx membuat segmen tersebut dapat diakses secara publik.

app/about/page.tsx ➔ URL: /about
app/events/[id]/page.tsx ➔ URL: /events/123 (Dynamic Parameter)
app/blog/[...slug]/page.tsx ➔ URL: /blog/2026/07/nextjs-16 (Catch-all Route)
app/(auth)/login/page.tsx ➔ URL: /login (Route Group mengabaikan folder (auth))

💻 Mengakses Dynamic Route Parameters

app/events/[id]/page.tsx

interface PageProps {
  params: Promise<{ id: string }>;
}

export default async function EventDetailPage({ params }: PageProps) {
  // Di Next.js 16, params adalah Promise yang harus di-await!
  const { id } = await params;

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold">Detail Event ID: {id}</h1>
    </div>
  );
}