Les dossiers sont des routes

La plupart des frameworks vous demandent de déclarer vos routes quelque part : une liste de chemins, chacun associé à un composant. Next.js les lit directement depuis votre arborescence de fichiers.

Toute la règle tient en une seule ligne : un dossier à l'intérieur de app/ est un morceau de l'URL, et un fichier page.jsx à l'intérieur est ce que les visiteurs voient.

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

Lisez une URL en descendant l'arborescence. /menu/drinks correspond au dossier menu, puis au dossier drinks, puis à la page qu'il contient. Imbriquer des dossiers imbrique les URL. Il n'y a pas d'étape séparée.

L'autre moitié de la règle est tout aussi importante : un dossier est seulement une route lorsqu'il contient un page.jsx.

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

Ici, app/menu/ existe, mais personne ne peut visiter /menu : il n'y a aucun fichier page à l'intérieur. C'est juste un conteneur sur le chemin vers /menu/drinks. C'est une fonctionnalité : vous pouvez regrouper des fichiers connexes dans app/ sans publier accidentellement une URL.

Et le nom du dossier est le segment d'URL, caractère par caractère. Un dossier nommé About Us vous donnerait l'URL /About%20Us, c'est pourquoi les dossiers de route sont en minuscules et séparés par des tirets : app/about-us/.