Next.js App Router vs Pages Router

App Router (Recommended - Next.js 13+)

app/
  layout.tsx     # Root layout (replaces _app.tsx)
  page.tsx       # Route component
  loading.tsx    # Loading UI
  error.tsx      # Error boundary
  not-found.tsx  # 404 UI

Key Differences

• Server Components by default (use 'use client' for client components)
• Nested layouts with persistent UI
• Streaming and Suspense built-in
• fetch with built-in caching

Pages Router (Legacy)

pages/
  _app.tsx       # Global app wrapper
  _document.tsx  # HTML document structure
  index.tsx      # / route
  about.tsx      # /about route

Key Differences

• All components are client-side by default
• getServerSideProps / getStaticProps for data fetching
• Simpler mental model for small apps

When to Use Which

App Router: New projects, complex layouts, need streaming Pages Router: Legacy projects, simpler needs, familiarity