Next.js App Router vs Pages Router

I've built projects with both. Here's the real difference.

What Changes

| Feature | Pages Router | App Router | |---------|-------------|------------| | Routing | File-based /pages | File-based /app | | Data fetching | getServerSideProps, getStaticProps | async components, generateStaticParams | | Layout | Shared component | layout.tsx per segment | | Streaming | Manual | Built-in via loading.tsx |

Server Components by Default

The biggest shift: every component in app/ is a Server Component by default.

tsxCopy
// app/blog/page.tsx — runs on server, never ships to client
export default async function BlogPage() {
    const posts = await getPosts()
    return <div>{posts.map(renderPost)}</div>
}

Need interactivity? Add 'use client':

tsxCopy
'use client'
import { useState } from 'react'

export function SearchBar() {
    const [query, setQuery] = useState('')
    // ...
}

When to Use Which

• New projects → App Router (it's the future)
• Existing large codebases → Migrate gradually
• Simple marketing sites → Either is fine

The App Router is not just a rewrite — it's a mental model shift. Think in Server Components first, then add client interactivity where needed.