nextjsroutingapp-routerPemula3 mnt baca

Routing Dasar: Folder Jadi URL

Membuat halaman baru hanya dengan menambah folder dan file page.tsx, tanpa konfigurasi router.

Konsepnya sederhana

Di App Router, struktur folder sama dengan struktur URL. Folder app/tentang/page.tsx otomatis bisa diakses di /tentang. Tidak ada file router yang perlu ditulis.

app/ ├── page.tsx → / ├── tentang/ │ └── page.tsx → /tentang └── blog/ ├── page.tsx → /blog └── kontak/ └── page.tsx → /blog/kontak

Membuat halaman baru

Buat folder app/tentang, lalu isi page.tsx:

tsx
// app/tentang/page.tsx
export default function Tentang() {
  return (
    <main>
      <h1>Tentang Kami</h1>
      <p>Halaman ini ada di URL /tentang.</p>
    </main>
  );
}

Simpan, lalu buka http://localhost:3000/tentang. Selesai, tanpa restart server.

Nested route

Folder di dalam folder menjadi URL bertingkat. app/blog/kontak/page.tsx menjadi /blog/kontak. Ini cocok untuk struktur seperti dashboard: /dashboard, /dashboard/profil, /dashboard/pengaturan.

Aturan penting

Setiap route harus punya file page.tsx. Folder tanpa page.tsx tidak bisa diakses langsung, tapi tetap bisa dipakai untuk mengorganisasi file (misal folder components/ di dalam app/ tidak menjadi route selama tidak ada page.tsx).

Tips praktis

Gunakan nama folder bahasa Inggris yang pendek dan deskriptif, misal tentang atau blog, bukan halaman-tentang-kami-yang-panjang. URL yang pendek lebih mudah diingat user dan lebih rapi di hasil pencarian. Kalau suatu saat butuh mengubah URL, siapkan redirect dari URL lama agar link yang sudah tersebar tidak mati.

Kesalahan umum pemula

  • Lupa membuat page.tsx. Folder saja tidak cukup. Tanpa page.tsx, folder itu bukan halaman dan URL-nya 404.
  • Mengira nama file bebas. Hanya page.tsx yang menjadi halaman. File halaman.tsx atau index.tsx di App Router tidak otomatis jadi route.
  • Struktur terlalu dalam. URL seperti /a/b/c/d/e menyulitkan user dan SEO. Usahakan maksimal 3 level untuk halaman penting.

Latihan singkat

  1. Buat tiga halaman: /tentang, /kontak, dan /blog. Tambahkan navigasi sederhana di masing-masing halaman.
  2. Buat nested route /produk/unggulan dan pastikan kedua URL (/produk tidak ada, /produk/unggulan ada) berperilaku seperti yang kamu harapkan.

Rangkuman

  • Struktur folder di app/ sama dengan struktur URL. Tanpa konfigurasi router manual.
  • Setiap route wajib punya page.tsx; folder tanpa itu bukan halaman.
  • Folder bersarang menjadi URL bertingkat seperti /blog/kontak.
  • Rencanakan struktur URL maksimal 3 level agar ramah user dan SEO.

Catatan teknis: Folder yang namanya diawali underscore, misal app/_components/, tidak pernah menjadi route. Ini konvensi resmi untuk menyimpan file privat seperti komponen helper atau fungsi util.