Папки как маршруты

Большинство фреймворков просят вас где-нибудь прописать свои маршруты: список путей, каждый из которых сопоставлен с компонентом. Next.js вместо этого считывает их из вашего дерева файлов.

Всё правило умещается в одну строку: папка внутри app/ — это часть URL, а page.jsx внутри неё — это то, что видят посетители.

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

Читайте URL, спускаясь по дереву. /menu/drinks — это папка menu, затем папка drinks, затем страница внутри неё. Вложенность папок определяет вложенность URL. Отдельного шага нет.

Вторая половина правила не менее важна: папка является маршрутом только тогда, когда содержит page.jsx.

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

Здесь app/menu/ существует, но никто не может перейти на /menu: в нем нет файла page. Это просто контейнер на пути к /menu/drinks. Это полезная возможность: вы можете группировать связанные файлы в app/, случайно не публикуя URL-адрес.

И имя папки и является сегментом URL, символ в символ. Папка с названием About Us привела бы к URL /About%20Us, именно поэтому папки маршрутов записываются в нижнем регистре и через дефис: app/about-us/.