What is the difference between the Pages Router and App Router in Next.js?
Answer
Next.js has two routing systems: Pages Router (Next.js <13, legacy): files in the pages/ directory become routes. pages/index.js → /; pages/about.js → /about; pages/users/[id].js → /users/123. Features: getServerSideProps (SSR), getStaticProps (SSG), getStaticPaths (static paths for dynamic routes), API routes in pages/api/. All components are React Client Components by default. App Router (Next.js 13+, recommended): files in the app/ directory. Each folder represents a route segment. Special files: page.tsx (route UI), layout.tsx (shared layout), loading.tsx (loading UI), error.tsx (error UI), not-found.tsx. All components are React Server Components by default (zero client-side JS). Uses React 18 features: Server Components, Streaming, Suspense. Data fetching happens directly in components with async/await. More powerful and flexible. Key differences: App Router supports Server Components (Pages Router doesn't); App Router uses layouts (Pages Router uses _app.js); App Router fetches data differently (async components vs getServerSideProps); App Router supports React 18 Suspense streaming. Migrate from Pages Router to App Router progressively — they can coexist.