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 erst 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 aufrufen: Es gibt darin keine Seitendatei. Es ist lediglich ein Container auf dem Weg zu /menu/drinks. Das ist ein Vorteil: Du kannst 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 dir die URL /About%20Us geben, weshalb Routenordner kleingeschrieben und mit Bindestrichen versehen werden: app/about-us/.