Foldery to ścieżki

Większość frameworków wymaga, aby zapisać gdzieś swoje trasy: listę ścieżek, z których każda jest przypisana do komponentu. Next.js odczytuje je zamiast tego ze struktury plików.

Cała zasada mieści się w jednym zdaniu: folder w app/ jest częścią adresu URL, a plik page.jsx w tym folderze zawiera to, co widzą odwiedzający.

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

Odczytuj adres URL, przechodząc w dół drzewa. /menu/drinks oznacza folder menu, następnie folder drinks, a potem znajdującą się w nim stronę. Zagnieżdżanie folderów powoduje zagnieżdżanie adresów URL. Nie ma osobnego kroku.

Druga połowa zasady jest równie ważna: folder staje się ścieżką tylko, gdy znajduje się w nim plik page.jsx.

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

Tutaj istnieje app/menu/, ale nikt nie może odwiedzić /menu: nie ma tam pliku strony. To tylko kontener na drodze do /menu/drinks. To zaleta: możesz grupować powiązane pliki w app/ bez przypadkowego publikowania adresu URL.

A nazwa folderu jest segmentem adresu URL, znak po znaku. Folder o nazwie About Us dałby adres URL /About%20Us, dlatego foldery tras mają małe litery i nazwy rozdzielone łącznikami: app/about-us/.