App Router vs Pages Router

The App Router is the default in Next.js 15, but the older Pages Router has not gone away. Understanding both helps when you read older codebases or older tutorials.

What Pages Router Looked Like

The Pages Router put routes under pages/, with one component per file and data fetching via special exports.

// pages/blog/[slug].tsx — Pages Router style
import type { GetStaticProps, GetStaticPaths } from 'next';

export const getStaticPaths: GetStaticPaths = async () => {
  return { paths: [], fallback: 'blocking' };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const post = await fetchPost(params?.slug as string);
  return { props: { post } };
};

export default function PostPage({ post }: { post: { title: string } }) {
  return <h1>{post.title}</h1>;
}

A single pages/_app.tsx wrapped everything, and there was no nested layout system.

What App Router Looks Like

The App Router moves data fetching into the component itself and replaces _app.tsx with composable layouts.

// app/blog/[slug]/page.tsx — App Router style
export default async function PostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await fetchPost(slug);
  return <h1>{post.title}</h1>;
}

Key Differences

• app/ defaults to React Server Components; pages/ is always client components
• app/ uses nested layouts; pages/ has a single _app.tsx
• app/ ships Server Actions, streaming, and Suspense; pages/ does not
• app/ uses fetch with next: { revalidate }; pages/ uses getStaticProps

Coexistence and Migration

The two routers can live side-by-side in one project. Next.js routes a URL to app/ first, then falls back to pages/. For migrations, move routes one at a time:

# move from
pages/about.tsx
# to
app/about/page.tsx

For new projects, just use app/. The next lesson covers the special filenames inside a segment.