nextjs/Routing

The App Router maps folders to URL segments, and a nested folder structure automatically produces nested routes. Layouts nest to match that structure, and — critically — a layout persists across navigations between routes that share it, so a shared layout doesn't unmount and remount every time you navigate; only the segment that actually changes re-renders.

Navigation happens through the Link component for declarative links and the useRouter hook for programmatic navigation, both enabling client-side transitions with no full page reload. Next.js automatically code-splits by route and prefetches linked routes that enter the viewport, so by the time a user actually clicks a link, its code is often already loaded — a meaningful step beyond the older Pages Router, which mapped files to routes without any concept of nested, persistent layouts.