Belajar Next.js App Router #2: Struktur Folder & Konsep File-based Routing

• Struktur Folder App Router
• Konsep File-based Routing
• Contoh Membuat Route Baru
• Peran File page.tsx
• Peran File layout.tsx
• Nested Routing di App Router
• Route Groups
• Private Folders
• Kesimpulan

Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah berhasil menginstall dan menjalankan project Next.js App Router. Sekarang, kita akan mulai memahami fondasi terpenting dari App Router, yaitu struktur folder dan konsep file-based routing.

Memahami struktur folder pada App Router sangat penting, karena seluruh proses routing di Next.js ditentukan langsung dari struktur folder dan file yang kita buat. Dengan memahami konsep ini sejak awal, kita akan lebih mudah mengembangkan aplikasi yang rapi dan terstruktur.

Struktur Folder App Router

Pada project yang telah kita buat sebelumnya, kita akan menemukan struktur folder utama seperti berikut:

src/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/

Folder app/ merupakan inti dari sistem routing pada App Router. Semua halaman, layout, dan segment routing akan didefinisikan di dalam folder ini.

Berbeda dengan pendekatan lama yang menggunakan folder pages/, pada App Router setiap folder merepresentasikan sebuah route, dan file tertentu di dalamnya memiliki fungsi khusus.

Konsep File-based Routing

File-based routing adalah konsep di mana URL aplikasi ditentukan langsung oleh struktur folder dan nama file. Artinya, kita tidak perlu lagi mendefinisikan route secara manual seperti pada framework lain.

Sebagai contoh, file berikut:

app/page.tsx

Secara otomatis akan menjadi halaman utama dengan URL:

/

Jika kita membuat folder baru di dalam app/, maka folder tersebut akan menjadi route baru.

Contoh Membuat Route Baru

Sekarang kita coba membuat route baru bernama about.

Silahkan teman-teman buat folder dan file berikut:

app/about/page.tsx

Isi file page.tsx tersebut dengan kode sederhana:

export default function AboutPage() {
    return (
        <div className="flex flex-col items-center pt-50 justify-center">
            <h1>Halaman About</h1>
            <p>Ini adalah halaman about.</p>
        </div>
    )
}

Jika server masih berjalan, silakan buka browser dan akses: http://localhost:3000/about

Maka halaman About akan tampil sesuai dengan komponen yang kita buat. Dari sini terlihat bahwa tidak ada konfigurasi routing tambahan, semuanya ditentukan oleh struktur folder.

Peran File page.tsx

Pada App Router, file page.tsx memiliki peran khusus sebagai entry point halaman. Tanpa file page.tsx, sebuah folder tidak akan dianggap sebagai halaman yang bisa diakses melalui browser.

Dengan kata lain, folder hanyalah segment route, dan page.tsx adalah penentu apakah segment tersebut memiliki halaman atau tidak.

Peran File layout.tsx

Selain page.tsx, terdapat file penting lainnya yaitu layout.tsx. File ini digunakan untuk mendefinisikan layout yang akan membungkus halaman di dalam satu segment route.

Sebagai contoh, file app/layout.tsx akan menjadi layout global yang membungkus seluruh halaman aplikasi. Pada artikel selanjutnya, kita akan membahas konsep layout ini secara lebih mendalam.

Nested Routing di App Router

Salah satu keunggulan App Router adalah dukungan terhadap nested routing secara alami.

Contohnya, jika kita membuat struktur seperti berikut:

app/blog/page.tsx

app/blog/detail/page.tsx

Maka URL yang dihasilkan adalah:

/blog

/blog/detail

Pendekatan ini membuat struktur routing menjadi sangat jelas dan mudah dipahami hanya dengan melihat struktur folder.

Route Groups

Selain nested routing, App Router juga menyediakan fitur Route Groups. Route group digunakan untuk mengelompokkan folder tanpa mempengaruhi URL. Route group ditandai dengan nama folder yang dibungkus tanda kurung.

Sebagai contoh:

app/(auth)/login/page.tsx

Meskipun terdapat folder (auth), URL yang dihasilkan tetap:

/login

Route group sangat berguna untuk mengelompokkan fitur tertentu, seperti halaman authentication atau dashboard, tanpa menambah segment pada URL.

Private Folders

App Router juga mengenal konsep private folder, yaitu folder yang tidak akan dianggap sebagai route oleh Next.js. Private folder ditandai dengan awalan underscore (_).

Contoh struktur private folder:

app/_components/Navbar.tsx

File atau folder dengan awalan underscore biasanya digunakan untuk menyimpan komponen, helper, atau utilitas yang tidak ingin diekspos sebagai route.

Dengan private folder, struktur project menjadi lebih rapi dan terorganisir tanpa mengganggu sistem routing.

Kesimpulan

Pada artikel ini, kita telah mempelajari struktur folder utama pada Next.js App Router serta memahami konsep file-based routing yang menjadi inti dari sistem routing di Next.js. Kita juga telah membahas nested routing, route groups, dan private folders sebagai cara untuk mengatur struktur project dengan lebih rapi dan terkontrol.

Pemahaman ini akan menjadi dasar penting sebelum kita melangkah ke pembahasan berikutnya, yaitu bagaimana mengatur tampilan dan struktur halaman menggunakan layout di Next.js App Router.

Terima Kasih