No history yet

App Router Architecture

The App Router Revolution

In Next.js, routing has evolved. The classic pages directory, where each file automatically became a route, has been superseded by a more powerful model: the app directory. This isn't just a name change; it's a fundamental shift in how we build full-stack applications, designed to leverage modern React features like Server Components and streaming.

The app directory uses a file-system-based router, but with special conventions. Instead of every file being a route, folders define the URL segments, and special files like page.tsx define the UI for that segment.

Let's compare the two structures. The older Pages Router was straightforward but less flexible for complex, nested UIs.


// Older `pages` directory structure
pages/
  _app.js       // Custom App component
  _document.js  // Custom Document
  index.js      // Route: /
  about.js      // Route: /about
  posts/
    [slug].js   // Route: /posts/:slug

The App Router organizes things differently, using folders for routes and special files for UI. This approach makes creating shared layouts and handling different UI states much more intuitive.


// Modern `app` directory structure
app/
  layout.tsx    // Root layout (required)
  page.tsx      // Route: /
  about/
    page.tsx    // Route: /about
  posts/
    [slug]/
      page.tsx  // Route: /posts/:slug

Architecting with Layouts

The core of the App Router's power lies in its special file conventions, particularly layout.tsx. A layout is a UI component that is shared across multiple pages. When you navigate between routes that share the same layout, the layout itself doesn't re-render. It preserves its state, like scroll position or input fields, providing a smoother user experience.

Imagine a dashboard with a persistent sidebar and header. In the App Router, you'd define this structure in app/dashboard/layout.tsx. Any page inside the dashboard folder, like app/dashboard/settings/page.tsx or app/dashboard/analytics/page.tsx, will automatically be wrapped by this layout.