Memahami Routing di Next.js App Router (Next.js 13–15)

Next.js App Router memperkenalkan sistem routing baru berbasis file-system yang lebih fleksibel dibanding Pages Router. Setiap folder di dalam direktori app/ secara otomatis menjadi route, dan file page.tsx di dalamnya akan dirender sebagai halaman.

Routing ini mendukung nested layout, dynamic route, API route, route groups, dan banyak fitur modern lainnya yang membuat struktur aplikasi lebih rapi dan scalable.

---

📂 Struktur Routing Dasar

Contoh struktur:

app/
  layout.tsx
  page.tsx
  about/
    page.tsx
  blog/
    page.tsx
    [slug]/
      page.tsx

Path	URL	Penjelasan
app/page.tsx	/	Homepage
app/about/page.tsx	/about	Halaman biasa
app/blog/page.tsx	/blog	Halaman list blog
app/blog/[slug]/page.tsx	/blog/my-first-post	Dynamic route

---

🔀 Dynamic Routes [param]

Digunakan untuk halaman dinamis seperti artikel blog, profil user, atau detail produk.

app/blog/[slug]/page.tsx

Contoh akses parameter:

export default function BlogDetail({ params }: { params: { slug: string } }) {
  return <h1>Artikel: {params.slug}</h1>;
}

URL yang valid:

/blog/cara-membuat-landing-page
/blog/react-optimization

---

📦 Catch-All & Optional Catch-All Routes

Digunakan untuk struktur path yang fleksibel (multi-level):

Catch-All [...slug]

app/docs/[...slug]/page.tsx

Match:

/docs/install
/docs/install/windows
/docs/install/windows/v15

export default function Docs({ params }: { params: { slug: string[] } }) {
  return <pre>{JSON.stringify(params.slug)}</pre>;
}

Optional Catch-All [[...slug]]

app/docs/[[...slug]]/page.tsx

Match:

/docs  ← aman
/docs/getting-started

---

🏗 Route Groups ( )

Folder dengan tanda kurung tidak menjadi bagian URL, tetapi berguna untuk grouping dan layout berbeda.

app/
  (site)/
    layout.tsx
    page.tsx
    blog/
      page.tsx
  (auth)/
    login/
      page.tsx

File	URL
app/(site)/page.tsx	/
app/(site)/blog/page.tsx	/blog
app/(auth)/login/page.tsx	/login

Cocok untuk memisahkan halaman publik, dashboard admin, atau halaman tanpa navbar/footer.

---

📡 API Routes (Route Handlers)

Tidak lagi di /pages/api, melainkan di:

app/api/posts/route.ts

Contoh:

export async function GET() {
  return Response.json({ message: "Hello API" });
}

export async function POST(req: Request) {
  const data = await req.json();
  return Response.json(data);
}

URL:

/api/posts

---

⏳ Loading, Error, Not Found Routes

File	Fungsi
loading.tsx	Placeholder loading saat fetch data
error.tsx	Error UI per-folder
not-found.tsx	404 custom
template.tsx	Memaksa re-render layout

Contoh loading:

export default function Loading() {
  return <p>Loading...</p>;
}

---

📈 Kesimpulan

Next.js App Router membawa arsitektur routing yang powerful:

Fitur	Kegunaan
Automatic file-based routing	Tidak butuh react-router
Nested & shared layouts	Mudah kelola UI global
Dynamic & catch-all routes	Sangat fleksibel untuk konten
Route groups	Struktur besar tetap rapi
API routes terintegrasi	Full-stack in one project

App Router adalah standar modern untuk aplikasi React skala kecil hingga besar — cepat, sederhana, scalable.