What is the difference between app and pages router in Next.js?

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.

---

#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

#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

#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

---

#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.