What is App Router (Next.js)?

App Router is the primary routing system in Next.js, introduced as stable in version 13.4 (May 2023). It replaces the Pages Router's pages/ directory with an app/ directory where every component is a React Server Component by default. This means components render on the server and send zero JavaScript to the client unless you explicitly opt in with 'use client'. App Router supports nested layouts, parallel routes, intercepting routes, streaming with <Suspense>, and built-in data fetching via async Server Components — no more getServerSideProps or getStaticProps. Since Next.js 14 (October 2023), App Router has been the recommended default for all new projects. We've shipped it on 50+ client projects, and it's now our standard for any greenfield Next.js build at Social Animal.

How it works

App Router uses a file-system convention inside the app/ directory. Each folder represents a route segment, and special files control behavior:

page.tsx — the UI for that route
layout.tsx — a persistent wrapper that doesn't re-render on navigation
loading.tsx — a Suspense fallback shown while the page streams in
error.tsx — an error boundary scoped to that segment
route.ts — an API route handler (replaces pages/api/)

Here's a minimal example:

app/
  layout.tsx        ← root layout (wraps everything, includes <html>)
  page.tsx          ← renders at /
  blog/
    layout.tsx      ← blog-specific layout (sidebar, etc.)
    page.tsx        ← renders at /blog
    [slug]/
      page.tsx      ← renders at /blog/my-post

Data fetching happens directly inside Server Components with async/await. There's no separate data-fetching function — you just fetch() or call your database directly in the component body. Next.js extends the native fetch API with caching and revalidation options:

// app/blog/[slug]/page.tsx
export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`, {
    next: { revalidate: 60 }, // ISR: revalidate every 60 seconds
  }).then(res => res.json());

  return <article><h1>{post.title}</h1><p>{post.body}</p></article>;
}

Layouts are the killer feature. A layout.tsx persists across navigations of its child segments, preserving state and avoiding unnecessary re-renders. This is fundamentally different from Pages Router, where the entire page component unmounts and remounts on navigation.

When to use it

App Router is the right choice for most Next.js projects started after mid-2023. Specifically:

Use App Router when:

You're starting a new Next.js project (it's the default since v13.4)
You need nested, persistent layouts (dashboards, multi-panel UIs)
You want to reduce client-side JavaScript — Server Components ship zero JS by default
You need streaming and progressive rendering for slow data sources
You're building with Next.js 14 or 15 — App Router gets all the new features

Think twice when:

You have an existing Pages Router app that works fine — migration is non-trivial and not always worth it
Your team relies heavily on libraries that haven't adopted Server Component compatibility (though most major ones have by now)
You need very simple static sites where Astro or plain Pages Router would be less overhead

Our preferred approach at Social Animal: App Router for all new builds, incremental migration for existing Pages Router projects using Next.js's built-in coexistence support.

App Router vs alternatives

Feature	App Router (`app/`)	Pages Router (`pages/`)	Remix (React Router v7)	Astro
Server Components	✅ Default	❌	✅ (since v7)	N/A (island-based)
Nested Layouts	✅ Native	❌ Manual only	✅ Native	❌
Streaming / Suspense	✅ Built-in	❌	✅ Built-in	Partial
Data Fetching	`async` components	`getServerSideProps` / `getStaticProps`	Loaders / actions	`Astro.props` at build
Client JS by default	None (Server Components)	Full React bundle	Minimal (progressive)	Zero (unless islands)
Learning curve	Steeper	Lower	Moderate	Low
Maturity (Apr 2026)	~3 years stable	~6 years	~2 years (v7 form)	~3 years

The biggest practical difference from Pages Router: App Router's mental model is "server-first." You opt into the client, not out of it. That inversion trips up developers at first but pays off in smaller bundles and faster page loads.

Real-world example

We rebuilt a client's marketing site (120+ pages, heavy blog) from Pages Router to App Router on Next.js 15. The root layout holds the nav and footer, a blog/layout.tsx adds a sidebar with category filters, and each blog/[slug]/page.tsx is a Server Component that fetches from a headless CMS. After migration, the route-level JavaScript dropped by ~40% because most components no longer ship to the client. Largest Contentful Paint improved from 2.8s to 1.9s on mobile (measured in CrUX over 28 days). The nested layout meant the sidebar filter state persists as users click between posts — something that required manual state management in Pages Router. Build times stayed roughly the same thanks to ISR with 60-second revalidation.

Frequently asked questions about App Router (Next.js)

Is App Router the same as Pages Router?

No. They're two distinct routing systems in Next.js that can coexist in the same project but work very differently. Pages Router uses the `pages/` directory, where every file exports a React client component and data fetching happens through special functions like `getServerSideProps`. App Router uses the `app/` directory, where components are React Server Components by default, layouts are nested and persistent, and data fetching happens directly inside `async` components. Since Next.js 13.4, App Router is the recommended default, and all new Next.js features (Server Actions, Partial Prerendering, etc.) are App Router-only.

When did App Router become stable?

App Router was introduced in beta with Next.js 13.0 in October 2022 and marked stable in Next.js 13.4 in May 2023. That 13.4 release was the turning point — Vercel officially recommended it for production use. Next.js 14 (October 2023) made it the default for `create-next-app`, and Next.js 15 (October 2024) continued to add features exclusively to App Router, including stable Server Actions and improvements to the caching model. By April 2026, almost all new Next.js projects in the ecosystem use App Router.

What's the alternative to App Router?

Within Next.js, the alternative is Pages Router — it still works and receives security patches, but it doesn't get new features. Outside Next.js, the closest equivalents are Remix (now part of React Router v7), which also supports Server Components and nested layouts with a similar server-first philosophy, and Astro, which takes a zero-JS-by-default approach using islands architecture instead of React Server Components. If you need a React-based full-stack framework with modern server rendering, App Router and Remix are the two main contenders as of 2026.

Should I migrate my existing Pages Router app to App Router?

It depends on pain points. If your current Pages Router app works well, ships fast, and doesn't need nested layouts or reduced client JS, migration may not be worth the effort. But if you're hitting walls with layout persistence, large client bundles, or want Server Actions, it's worth the investment. Next.js supports both routers in the same project, so you can migrate incrementally — move one route at a time to `app/` while keeping the rest in `pages/`. We typically recommend starting with the most layout-heavy section (like a dashboard) and migrating outward. Budget 2-4 weeks for a medium-sized app.