App vs Pages Router in Next.js

Rohit Kumar
8 min readAug 1, 2024

Next.js, a popular React framework, provides two primary routing systems: the traditional pages router and the newly introduced app router. Each offers unique features and handling mechanisms. This comprehensive blog will compare the two routers, covering various aspects like static generation, server-side rendering, dynamic routing, linking, custom configurations, and more. By the end, you will have a thorough understanding of how each router works and when to use them.

Table of Contents

1. Overview
2. File Structure
3. Pages and Layouts
4. Static Generation (SSG)
5. Server-Side Rendering (SSR)
6. Client-Side Rendering (CSR)
7. Dynamic Routes
8. Linking and Navigating
9. Redirecting
10. Custom App
11. Custom Document
12. API Routes
13. Custom Errors
14. Internationalization
15. Middleware

1. Overview

--

--