Pastas São Rotas

A maioria dos frameworks pede para você definir suas rotas em algum lugar: uma lista de caminhos, cada um emparelhado com um componente. O Next.js, em vez disso, lê essas rotas a partir da sua árvore de arquivos.

A regra inteira cabe em uma linha: uma pasta dentro de app/ é um pedaço da URL, e um page.jsx dentro dela é o que os visitantes veem.

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

Leia uma URL navegando pela árvore. /menu/drinks é a pasta menu, depois a pasta drinks e, em seguida, a página dentro dela. Aninhar pastas aninha URLs. Não há nenhuma etapa separada.

A outra metade da regra importa tanto quanto: uma pasta apenas é uma rota quando ela contém um page.jsx.

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

Aqui app/menu/ existe, mas ninguém pode visitar /menu: não há arquivo de página nele. É apenas um contêiner no caminho para /menu/drinks. Isso é um recurso: você pode agrupar arquivos relacionados em app/ sem publicar uma URL acidentalmente.

E o nome da pasta é o segmento da URL, caractere por caractere. Uma pasta chamada About Us geraria a URL /About%20Us, e é por isso que as pastas de rota são em minúsculas e separadas por hífen: app/about-us/.