Next.js App Router

The App Router, introduced in Next.js 13 and stabilized in Next.js 14, is a fundamental shift in how Next.js applications are structured.

It replaces the pages/ directory with app/, and brings React Server Components as the default. This means components render on the server by default, reducing the JavaScript sent to the client and improving performance.

Nested layouts allow you to share UI across routes without re-rendering, and the new data fetching model lets you fetch data directly inside components using async/await. Streaming and Suspense are first-class citizens, enabling faster time-to-first-byte for complex pages.