File-System Routing

Analogi: papan nama jalan

Bayangkan sebuah komplek perumahan baru. Setiap kali dibangun sebuah jalan, papan namanya langsung dipasang: Jalan Melati, Jalan Kenanga. Kamu tidak perlu mendaftar ke kelurahan untuk memberi nama jalan, nama itu resmi begitu papannya berdiri.

Routing di Next.js bekerja persis seperti itu. Setiap folder yang kamu buat di dalam app/ otomatis menjadi segmen URL. Bikin folder tentang, dapat alamat /tentang. Tidak ada formulir pendaftaran, tidak ada file config yang harus diisi. Struktur folder adalah papan nama jalan, dan browser hanya mengikuti papan yang ada.

Prinsip dasar: folder menentukan URL

Di App Router, tidak ada file konfigurasi route terpisah. Aturannya satu kalimat: struktur folder menentukan URL.

Setiap folder bersarang menambah satu segmen di URL. Polanya konsisten sampai kedalaman berapa pun, dan kamu tidak pernah menulis kode routing untuk ini.

Kenapa sistem ini ada? Masalah yang diselesaikan

Di sistem config-based seperti react-router, route didaftarkan manual di satu file. Itu terlihat rapi di awal, tapi menyimpan dua sumber kebenaran: file config dan file halaman yang sebenarnya. Keduanya bisa bertentangan: halaman dihapus tapi pendaftarannya lupa dihapus (route hantu yang error saat dibuka), atau halaman dibuat tapi lupa didaftarkan (404 misterius padahal file ada).

File-system routing menghapus masalah itu dengan membuat kebenaran hanya satu: struktur file. Hapus folder, route-nya hilang. Bikin folder + page.tsx, route-nya lahir. Tidak ada daftar yang bisa basi karena tidak ada daftar sama sekali.

Aturan mainnya

1. Folder tanpa page.tsx tidak bisa diakses. Folder menentukan alamat, tapi page.tsx yang membuat alamat itu berpenghuni dan bisa dibuka publik.
2. Nama folder = segmen URL. Pakai kebab-case (tentang-kami), hindari spasi dan huruf kapital agar URL bersih dan mudah dibagikan.
3. page.tsx wajib memakai default export komponen React. Itulah komponen yang di-render saat URL dibuka.

Contoh 1: halaman statis sederhana

// app/tentang/page.tsx
export default function Tentang() {
  return (
    <main>
      <h1>Tentang Kami</h1>
      <p>Warung kopi kecil yang buka sejak 2020.</p>
    </main>
  );
}

Simpan, buka /tentang di browser: halaman muncul. Tidak ada import router, tidak ada pendaftaran. Dari contoh ini kamu bisa merasakan kecepatan iterasi file-system routing: ide halaman baru bisa diwujudkan dalam 10 detik (bikin folder, bikin file, selesai).

Contoh 2: menghubungkan halaman dengan Link

Halaman yang tidak terhubung satu sama lain tidak berguna. Untuk navigasi antar halaman, pakai komponen Link dari next/link:

// app/page.tsx
import Link from "next/link";

export default function Home() {
  return (
    <main>
      <h1>Selamat datang di warung kami!</h1>
      <nav>
        <Link href="/tentang">Tentang Kami</Link>
        {" | "}
        <Link href="/blog">Blog</Link>
      </nav>
    </main>
  );
}

Link terlihat seperti tag <a> biasa, tapi ia melakukan navigasi client-side: halaman tujuan diambil tanpa reload penuh, jauh lebih cepat dan state aplikasi tidak hilang. Bonusnya: Next.js otomatis me-prefetch halaman yang ter-link saat link-nya terlihat di layar, sehingga klik terasa instan. Inilah kenapa memakai <a href> biasa di aplikasi Next.js dianggap kesalahan: kamu membuang semua optimasi itu dan kembali ke reload penuh ala website tahun 2005.

Perhatikan progresinya: Contoh 1 membuat satu halaman yang berdiri sendiri, Contoh 2 menghubungkan banyak halaman menjadi sebuah website yang bisa dijelajahi. Dua pola ini (bikin page, hubungkan dengan Link) adalah 90% dari kebutuhan routing sehari-hari.

Catatan teknis: Link hanya untuk navigasi internal (antar halaman aplikasimu). Untuk link ke website luar, tetap pakai <a> biasa. Mencampur keduanya adalah sumber bug navigasi yang umum.

Kesalahan umum pemula

1. Nama folder berantakan

SALAH: Folder app/Tentang Kami/ dengan spasi dan huruf kapital. URL yang dihasilkan /Tentang%20Kami jelek, susah diketik, dan terlihat tidak profesional saat dibagikan.

BENAR: Selalu kebab-case: app/tentang-kami/ menghasilkan /tentang-kami yang bersih. Anggap nama folder sebagai nama jalan: singkat, kecil semua, tanpa spasi.

2. Lupa default export

SALAH: export function Tentang() (named export). File benar, lokasi benar, tapi halaman error atau blank karena Next.js secara spesifik mencari default export untuk di-render.

BENAR: export default function Tentang(). Selalu. Jadikan refleks jari.

3. Memakai <a> untuk navigasi internal

SALAH: <a href="/tentang">Tentang</a>. Berfungsi, tapi setiap klik me-reload seluruh halaman: lambat, state hilang, dan prefetch tidak jalan.

BENAR: import Link from "next/link" lalu <Link href="/tentang">Tentang</Link>. Navigasi instan tanpa reload. Aturannya: internal pakai Link, eksternal pakai <a>.

4. Mengira folder saja cukup tanpa page.tsx

SALAH: Membuat app/galeri/ berisi foto-foto, lalu bingung kenapa /galeri 404. Folder hanyalah alamat, bukan penghuni.

BENAR: Tambahkan app/galeri/page.tsx. Ingat mantra modul ini: folder menentukan alamat, page.tsx menentukan apakah alamat itu bisa dibuka.