Las carpetas son rutas

La mayoría de los frameworks te piden que escribas tus rutas en algún lugar: una lista de rutas, cada una emparejada con un componente. Next.js las lee en su lugar directamente desde tu árbol de archivos.

Toda la regla cabe en una sola línea: una carpeta dentro de app/ es un fragmento de la URL, y un page.jsx dentro de ella es lo que ven los visitantes.

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

Lee una URL recorriendo el árbol. /menu/drinks es la carpeta menu, después la carpeta drinks, después la página dentro de ella. Anidar carpetas anida las URL. No hay un paso separado.

La otra mitad de la regla importa de la misma manera: una carpeta solo es una ruta una vez que contiene un page.jsx.

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

Aquí existe app/menu/, pero nadie puede visitar /menu: no hay ningún archivo page en él. Es solo un contenedor en el camino hacia /menu/drinks. Eso es una característica: puedes agrupar archivos relacionados en app/ sin publicar accidentalmente una URL.

Y el nombre de la carpeta es el segmento de la URL, carácter por carácter. Una carpeta llamada About Us te daría la URL /About%20Us, razón por la cual las carpetas de rutas van en minúsculas y separadas por guiones: app/about-us/.