App Router & File-based Routing — CompileDaily Study

Penjelasan

Next.js App Router memakai routing BERBASIS FILE — kamu tidak perlu file routes.js/web.php terpisah seperti framework lain. Setiap folder di dalam app/ yang berisi file page.js (atau .jsx/.tsx) otomatis jadi satu route/halaman, path-nya mengikuti struktur foldernya persis.

Contoh Konsep

// app/page.js -> route '/'
export default function Beranda() {
    return <h1>Halaman Beranda</h1>;
}

// app/tentang/page.js -> route '/tentang'
export default function Tentang() {
    return <h1>Halaman Tentang</h1>;
}

Praktikum

Bayangkan struktur folder app/kontak/page.js. Tulis komponen default export untuk file itu yang menampilkan <h1>Halaman Kontak</h1>, lalu sebutkan (sebagai komentar) route apa yang otomatis terbentuk dari struktur folder itu.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Nama file page.js BERSIFAT WAJIB dan HARUS PERSIS itu (bukan index.js seperti beberapa framework lain) — file lain di dalam folder yang sama (mis. komponen pembantu) TIDAK otomatis jadi route, hanya page.js yang dikenali sebagai halaman.