Klasörler Yoldur

Çoğu framework, rotalarınızı bir biyere yazmanızı ister: her biri bir bileşenle eşleştirilmiş yolların bir listesi. Next.js ise bunun yerine bunları dosya ağacınızdan okur.

Kuralın tamamı tek bir satıra sığar: app/ içindeki bir klasör URL'nin bir parçasıdır ve içindeki page.jsx dosyası da ziyaretçilerin gördüğü şeydir.

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

Ağaçta aşağı doğru ilerleyerek bir URL okuyun. /menu/drinks, menu klasörü, ardından drinks klasörü ve içindeki sayfadır. Klasörleri iç içe yerleştirmek URL'leri iç içe yerleştirir. Ayrı bir adım yoktur.

Kuralın diğer yarısı da en az bunun kadar önemlidir: Bir klasör yalnızca içinde bir page.jsx barındırdığında bir route haline gelir.

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

Burada app/menu/ mevcut, ancak hiç kimse /menu adresini ziyaret edemez: içinde sayfa dosyası yok. /menu/drinks adresine giden yolda yalnızca bir kapsayıcıdır. Bu bir özelliktir: bir URL’yi yanlışlıkla yayınlamadan ilgili dosyaları app/ içinde gruplayabilirsiniz.

Ve klasör adı, karakteri karakterine URL segmentinin kendisidir. About Us adlı bir klasör size /About%20Us URL'sini verir; bu nedenle route klasörleri küçük harfle yazılır ve tire ile ayrılır: app/about-us/.