Ordner sind Routen

Die meisten Frameworks verlangen, dass Sie Ihre Routen irgendwo aufschreiben: eine Liste von Pfaden, jeweils gepaart mit einer Komponente. Next.js liest diese stattdessen direkt aus Ihrem Dateibaum ab.

Die ganze Regel passt in eine Zeile: Ein Ordner innerhalb von app/ ist ein Teil der URL, und eine page.jsx darin ist das, was Besucher sehen.

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

Lesen Sie eine URL ab, indem Sie den Baum hinabsteigen. /menu/drinks ist der menu-Ordner, dann der drinks-Ordner, dann die page darin. Das Verschachteln von Ordnern verschachtelt URLs. Es gibt keinen separaten Schritt.

Die andere Hälfte der Regel ist genauso wichtig: Ein Ordner ist nur dann eine Route, wenn er eine page.jsx enthält.

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

Hier existiert app/menu/, aber niemand kann /menu besuchen: Es befindet sich keine page-Datei darin. Es ist nur ein Ordner auf dem Weg zu /menu/drinks. Das ist ein Feature: Sie können zusammengehörige Dateien in app/ gruppieren, ohne versehentlich eine URL zu veröffentlichen.

Und der Ordnername ist das URL-Segment, Zeichen für Zeichen. Ein Ordner namens About Us würde die URL /About%20Us ergeben, weshalb Route-Ordner kleingeschrieben und mit Bindestrich getrennt werden: app/about-us/.