What is file-based routing in Next.js?

Next.js uses the filesystem as the router — the directory structure automatically defines application routes. App Router routing (app/ directory): each folder represents a route segment. The URL path corresponds to nested folder names. A page.tsx file makes the route publicly accessible. Examples: app/page.tsx → / (home); app/about/page.tsx → /about; app/blog/[slug]/page.tsx → /blog/my-first-post (dynamic segment); app/shop/[...category]/page.tsx → /shop/electronics/phones (catch-all segment); app/shop/[[...category]]/page.tsx → /shop AND /shop/electronics (optional catch-all). Route groups: app/(marketing)/about/page.tsx — parentheses group routes without adding to URL. Used for shared layouts within a group. Parallel routes: app/@modal/(.)photo/[id]/page.tsx — render multiple pages simultaneously. Intercepting routes: (.)path, (..)path, (...)path — intercept routes without full page navigation. Private folders: _components/ — underscore prefix opts out of routing. Pages Router: pages/ directory with .js/.tsx files directly. Dynamic: pages/posts/[id].tsx.