App Router vs Pages Router in Next.js

In this tutorial, I will explain App Router and Pages Router and will explain difference between it.

What is the App Router?

App Router introduce in Next.js 13+ version. It uses app directory. It is bases on React Server Components. It offers many features

  1. Server components
  2. Layouts
  3. Streaming
  4. Loading UI
  5. Nested routing
  6. SEO improvements
  7. Better performance

Note: App Router is most important for Next.js and It is a future of Next.js and must for all new Projects.

What is the Pages Router?

Page Router is a Old method and it uses into pages directory. It is based on client side rendering by default.

It provides

  1. getServerSideProps
  2. getStaticProps
  3. API routes in /pages/api

Note: Page router is not designed for the modern server-component architecture.

Difference between App Router vs Pages Router

You can easly understand difference between App Router vs Pages Router

Feature App Router Pages Router
Directory /app /pages
Component Type Server Components by default Client Components
Routing File-based routing File-based routing
Layout support ✔ Yes ✔ Limited (custom _app.js, _document.js)
Server rendering More efficient Less efficient
SEO Better Good
Recommended? ✔ Yes ❌ Not for new projects

Note: Pages Router only used for maintaining older projects. App Router is used for all new Next.js 13+ / 14 / 15 / 18+ projects.

App Router vs Pages Router in Next.js – Interview Questions

Q 1: What is the App Router?

Ans: App Router uses the app/ directory and supports server components and layouts.

Q 2: What is the Pages Router?

Ans: Pages Router uses the pages/ directory and traditional React components.

Q 3: Which router is recommended by Next.js?

Ans: App Router is recommended for new projects.

Q 4: Can both routers coexist?

Ans: Yes, both routers can exist in the same project.

Q 5: Which router supports server components?

Ans: App Router.

App Router vs Pages Router in Next.js – Objective Questions (MCQs)

Q1. Which directory is used by the App Router in Next.js?





Q2. Which router is recommended in Next.js 13 and later?





Q3. Server Components are supported by default in:





Q4. Which router uses getServerSideProps()?





Q5. Which feature is exclusive to the App Router?





Related App Router vs Pages Router in Next.js Topics