Q2: What is the difference between the App Router and Pages Router in Next.js?
- Pages Router (
/pages): Legacy routing model using file names as routes. UsesgetStaticPropsandgetServerSidePropsfor data fetching. All components default to Client Components. - App Router (
/app): Modern router introduced in Next.js 13. Built on React Server Components (RSC), uses folder-based conventions (page.js,layout.js), nested layouts, streaming, and Server Actions.
Pages Router vs App Router Mental Model
App Router Directory Structure
app/
├── layout.js # Shared root layout
├── page.js # Root '/' route page
└── dashboard/
├── layout.js # Nested '/dashboard' layout
└── page.js # '/dashboard' page route💡 App Router uses directory hierarchies and special reserved file conventions.
Key Takeaways
- App Router defaults all components to Server Components.
- App Router supports nested layouts and streaming Suspense boundaries natively.
Knowledge Check
What component model do files inside the App Router (/app) adopt by default?