Le cartelle sono route

La maggior parte dei framework ti chiede di definire le route da qualche parte: un elenco di percorsi, ciascuno abbinato a un componente. Next.js le legge invece dalla struttura dei file.

L'intera regola sta in una riga: una cartella dentro app/ è una parte dell'URL e un page.jsx al suo interno è ciò che vedono i visitatori.

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

Leggi un URL scendendo lungo l’albero. /menu/drinks è la cartella menu, poi la cartella drinks, poi la pagina al suo interno. Le cartelle annidate annidano gli URL. Non c’è un passaggio separato.

L’altra metà della regola è altrettanto importante: una cartella è un percorso solo quando contiene un page.jsx.

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

Qui app/menu/ esiste, ma nessuno può visitare /menu: non c'è alcun file di pagina al suo interno. È solo un contenitore nel percorso verso /menu/drinks. È una funzionalità: puoi raggruppare file correlati in app/ senza pubblicare per sbaglio un URL.

E il nome della cartella è il segmento dell'URL, carattere per carattere. Una cartella chiamata About Us ti darebbe l'URL /About%20Us, ed è per questo che le cartelle delle route sono in minuscolo e separate da trattini: app/about-us/.