Advanced · Level 10: Next.js App RouterAdvanced50 menitBahasa Indonesia

app Directory

Mengenal app directory sebagai sumber struktur route pada Next.js App Router.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan peran app directory pada App Router
Membedakan folder route segment dan file khusus
Membaca folder tree kecil lalu memperkirakan URL-nya

Next.jsApp RouterRoutingProject Structure

Isi lesson

5 blok

1.
Route dimulai dari struktur fileBelum selesaiWajib
2.
Baca route tree kecil dari folder appBelum selesaiWajib
3.
File khusus menentukan peran, bukan nama component sajaBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Route dimulai dari struktur file

Wajib

Di Next.js App Router, folder di dalam app membentuk route segment. File khusus seperti page.tsx dan layout.tsx memberi tahu Next.js UI mana yang harus ditampilkan untuk segment tersebut. Ini berbeda dari React app biasa yang sering menentukan route lewat konfigurasi JavaScript terpisah.

Jangan menganggap setiap folder otomatis bisa dibuka lewat URL. Folder menjadi bagian route ketika memiliki file page.tsx atau memiliki child route yang dapat diakses. Pada module ini, fokuskan perhatian pada hubungan sederhana antara folder, file khusus, dan URL sebelum masuk ke Server Components atau data loading.

Bagian ini memengaruhi progres lesson.

Baca route tree kecil dari folder app

Wajib

bash

app/
├── layout.tsx
├── page.tsx
├── dashboard/
│   ├── layout.tsx
│   ├── page.tsx
│   └── settings/
│       └── page.tsx
└── courses/
    └── [slug]/
        └── page.tsx

app/page.tsx membuat route /. app/dashboard/page.tsx membuat /dashboard, lalu app/dashboard/settings/page.tsx membuat /dashboard/settings. Folder [slug] adalah dynamic segment, sehingga app/courses/[slug]/page.tsx dapat menangani URL seperti /courses/react-basics. layout.tsx tidak menambah URL baru; ia membungkus page dan child layout pada segment tersebut.

Bagian ini memengaruhi progres lesson.

Catatan penting

Wajib

File khusus menentukan peran, bukan nama component saja

Next.js mengenali page.tsx dan layout.tsx dari nama file serta lokasinya. Menamai file CoursePage.tsx di dalam app/courses belum cukup untuk membuat route /courses. File tersebut dapat menjadi component pendukung, tetapi page.tsx adalah entry UI untuk route yang dapat diakses.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Folder tree mana yang membuat route /dashboard/settings dapat diakses?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

app directory adalah sumber struktur route pada App Router.
Folder membentuk route segment; page.tsx membuat segment tersebut dapat diakses sebagai page.
layout.tsx membungkus UI pada segment dan child route tanpa menambah URL sendiri.
Berikutnya, kamu akan membedakan pekerjaan page.tsx dan layout.tsx dengan contoh dashboard kecil.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Route dimulai dari struktur file.

Memuat progres Review module