Next.js App Router: File-Based Routing Explained

Next.js derives your routes from the file structure. This makes routes explicit, colocated, and easy to reason about.

Pages and layouts

A page.tsx renders a route, while a layout.tsx wraps shared chrome that persists across navigations — headers, sidebars, and fonts.

Dynamic segments

Folders in square brackets, like [slug], define dynamic routes. With generateStaticParams you can pre-render known slugs at build time.

Colocation and nesting

Components used by one route can live right next to it, keeping related code close and reducing cross-app coupling.

Wrapping up

The App Router's conventions feel verbose at first, but they put structure and performance decisions right where you can see them.