What different between App Router and Pages Router in Next.js

Question

I have started learning next.js in Next.js official documentation:

next.js official document

The document mentions two router features; App Router and Pages Router. Which one is best for development?

Can anyone explain the difference between App Router and Pages Router?

Should I learn both or one?

Some info here [Next.js’s New App Vs. Pages Router: A Detailed Comparison](https://javascript.plainenglish.io/next-jss-new-app-vs-pages-router-a-detailed-comparison-46f846963af5) — kiranvj, Jun 28 '23 at 05:16

krishnaacharyaa · Accepted Answer · 2023-08-08T14:35:36.453

12

Well to easily understand it, I have created the below table of difference, based on your requirement you can use desired router however app router is prefered in the official docs.

Feature	App Router	Pages Router
Routing type	Server-centric	Client-side
Support for Server Components	Yes	No
Complexity	More complex	Simpler
Performance	Better	Worse
Flexibility	More flexible	Less flexible

Also refer latest Nextjs 13 code templates Next.js 13+ Power Snippets | TypeScript/Javascript

It includes wide range of code snippets for both ts and js. Find all snippets here

edited Aug 08 '23 at 14:35

answered Jul 11 '23 at 08:45

krishnaacharyaa

14,953
4
49
88

3

Any link to the source ? – Patrissol Kenfack Jul 12 '23 at 05:34
1

It is actually my inference from the documentation @PatrissolKenfack – krishnaacharyaa Jul 19 '23 at 17:52
I would say, in regards to static site generation, pages router is more flexible – Rahul A Ranger Jul 23 '23 at 15:10
If you have inferred from the documentation, please link the inference. It feels like an answer to advertise something you made yourself. – horoyoi o Aug 23 '23 at 07:26

score 3 · Answer 2 · answered Jun 28 '23 at 06:19

In Next.js, there are two types of routers: the App router and the Page router. Let's discuss the differences between them point by point:

Purpose:

App Router: The App router handles the overall routing and navigation for your entire application. It is responsible for rendering the correct pages based on the URL and managing the transitions between pages.
Page Router: The Page router handles the routing within individual pages of your application. It allows you to define dynamic routes and access the route parameters for rendering specific content on a page.

Location:

App Router: The App router is typically implemented in the _app.js or _app.tsx file. It wraps your entire application and controls the routing and layout for all pages.
Page Router: The Page router is implemented in each individual page component. It defines the routing logic and determines the content to be rendered based on the current route.

In short, the App router is responsible for the overall routing and navigation of your application, while the Page router focuses on routing within individual pages. The App router is configured in the _app.js or _app.tsx file and provides global routing functionality, whereas the Page router is implemented within each page component and handles routing specific to that page.

score 0 · Answer 3 · answered Aug 24 '23 at 11:51

0

Hello,

As explained and visually illustrated above, using app routing offers many improvements. As a developer, I would strongly recommend that you start your projects directly with app routing. I myself am currently in the process of converting my existing projects to this method, as are many others in our company.

Have fun developing and coding!

answered Aug 24 '23 at 11:51

Nikoll

1

1

The question ask for differences, not for opinions. – dcolazin Aug 27 '23 at 09:55

score -4 · Answer 4 · answered Jun 28 '23 at 05:15

The App Router (_app.js) is used to configure app-wide settings and components, such as headers and footers. The Pages Router (files in the pages directory) is used to define routes and handle individual page rendering, including dynamic routes. You generally need to learn both to complete a full application.

What different between App Router and Pages Router in Next.js

4 Answers4

Linked