Routing and navigation

Nest and organize routes

Build deeper URLs, use route groups without changing those URLs, and keep private implementation folders out of the route tree.

Nested folders map naturally to nested paths. app/notes/new/page.tsx produces /notes/new. The route structure is visible in the filesystem, which I like when onboarding someone new.

A folder in parentheses, such as app/(marketing), is a route group. The name does not add a URL segment. A private folder prefixed with _ is excluded from routing. Use these conventions to organize layouts and colocated code, not to hide an unnecessarily complex URL.

Route groups help when two sections need different layouts without adding organizational words to their URLs. Because the group name disappears, (marketing)/about/page.tsx and (company)/about/page.tsx both want /about. Next.js cannot publish both. Pick one public path or rename a segment.

Private folders signal that a subtree is implementation detail. Ordinary colocated files are already non-routable, so I use _components or _lib when the underscore helps me scan the tree faster. Shared domain rules still belong outside a route when several route trees use them.

Create /about inside a (marketing) group and /notes/new inside the notes route. Add one private _components folder with a helper component. Before opening the browser, write down every public URL you expect. Then load each one and fix any mismatch.

A common mistake is assuming (shop)/products/page.tsx maps to /shop/products. It maps to /products. The parentheses never appear in the URL.

Another mistake is colocating ten helper files beside page.tsx without a private folder and then losing track of which files are routable. When the tree gets noisy, _lib buys you clarity for the cost of one underscore.

Lesson completed