Folder Menjadi Rute

Sebagian besar framework meminta kamu menuliskan rute di suatu tempat: daftar path yang masing-masing dipasangkan dengan komponen. Next.js membaca rute dari struktur file-mu.

Seluruh aturan ini cukup dijelaskan dalam satu baris: folder di dalam app/ menjadi bagian dari URL, dan page.jsx di dalamnya adalah yang dilihat pengunjung.

app/
    page.jsx                 ->  /
    about/
        page.jsx             ->  /about
    menu/
        page.jsx             ->  /menu
        drinks/
            page.jsx         ->  /menu/drinks

Baca URL dengan menelusuri pohon. /menu/drinks adalah folder menu, lalu folder drinks, kemudian halaman di dalamnya. Folder bertingkat menghasilkan URL bertingkat. Tidak ada langkah terpisah.

Bagian lain dari aturan ini sama pentingnya: folder menjadi hanya rute jika berisi page.jsx.

app/
    menu/
        drinks/
            page.jsx         ->  /menu/drinks  works
        MenuCard.jsx                           not a route
                             ->  /menu         404

Di sini app/menu/ ada, tetapi tidak ada yang bisa mengunjungi /menu: tidak ada file halaman di dalamnya. Folder ini hanya menjadi wadah dalam jalur menuju /menu/drinks. Ini adalah fitur: kamu bisa mengelompokkan file terkait di app/ tanpa sengaja menerbitkan URL.

Dan nama folder adalah segmen URL, karakter demi karakter. Folder bernama About Us akan menghasilkan URL /About%20Us, itulah sebabnya nama folder route menggunakan huruf kecil dan tanda hubung: app/about-us/.