Folders Are Routes

Most frameworks ask you to write down your routes somewhere: a list of paths, each paired with a component. Next.js reads them off your file tree instead.

The whole rule fits in one line: a folder inside app/ is a piece of the URL, and a page.jsx inside it is what visitors see.

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

Read a URL by walking down the tree. /menu/drinks is the menu folder, then the drinks folder, then the page inside it. Nesting folders nests URLs. There is no separate step.

The other half of the rule matters just as much: a folder is only a route once it holds a page.jsx.

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

Here app/menu/ exists, but nobody can visit /menu: there's no page file in it. It's just a container on the way to /menu/drinks. That's a feature: you can group related files in app/ without accidentally publishing a URL.

And the folder name is the URL segment, character for character. A folder called About Us would give you the URL /About%20Us, which is why route folders are lowercase and hyphenated: app/about-us/.