reactjsnext.jsrouter

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


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.

I understand that the App Router lets you use features such as Server Components and Streaming. and The Pages Router is the original Next.js router, which allowed you to build server-rendered React applications and continues to be supported for older Next.js applications.


Solution

  • 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