Suggest an editImprove this articleRefine the answer for “What is the difference between app and pages router in Next.js?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)In **Next.js** there are **two routers**: **Pages Router** and **App Router**. They solve the same task (routing), but their **approaches and capabilities are fundamentally different**. **Key point:** Pages Router is an outdated page-based router with a client-side approach, while App Router is a modern server-first router with Server Components, layouts, streaming, and better performance. App Router is the recommended option in Next.js.Shown above the full answer for quick recall.Answer (EN)ImageIn **Next.js** there are **two routers**: **Pages Router** and **App Router**. They solve the same task (routing), but their **approaches and capabilities are fundamentally different**. --- ## In short > **Pages Router** - old, page-based, client-side approach > **App Router** - new, component-based, server-side approach (recommended) --- ## Pages Router (`pages/`) **The classic option (before Next 13)** ### Features - A route = a file in `pages/` - The whole render is **client-first** - Data is loaded through: - `getServerSideProps` - `getStaticProps` - One layout for the whole application - No Server Components ### Example ```txt pages/ ├─ index.tsx → / ├─ blog.tsx → /blog └─ blog/[slug].tsx → /blog/post ``` ### Pros - simple and clear - familiar after React Router - many older tutorials ### Cons - a lot of boilerplate - more JS in the browser - an aging architecture --- ## App Router (`app/`) **The modern approach (Next 13+)** ### Features - A route = a folder with `page.tsx` - **Server Components by default** - Layouts at any level - Streaming, Suspense, partial rendering - Server Actions instead of an API - Flexible control of cache and data ### Example ```txt app/ ├─ layout.tsx ├─ page.tsx → / └─ blog/ ├─ layout.tsx └─ [slug]/ └─ page.tsx → /blog/post ``` ### Pros - less JS on the client - better SEO and performance - scalable architecture - suited for complex UIs ### Cons - a higher learning curve - more new concepts - requires understanding SSR and caching --- ## The main difference - philosophy | | Pages Router | App Router | | --- | --- | --- | | Approach | Page-based | Component-based | | Rendering | Client-first | Server-first | | Server Components | no | yes | | Layouts | Global | Nested | | Streaming | no | yes | | Server Actions | no | yes | | Future of Next.js | no | yes | --- ## What to choose today - **New projects on Pages Router** - not recommended - **New projects on App Router** - the de facto standard - Old projects can be **migrated gradually** --- ## Short answer for an interview > **Pages Router is an outdated page-based router with a client-side approach, while App Router is a modern server-first router with Server Components, layouts, streaming, and better performance. App Router is the recommended option in Next.js.**For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.