What are the differences between page router and app router in nextjs?

Q: What are the differences between page router and app router in nextjs?

Next.js provides two different routing systems: the Page Router (traditional) and the App Router (introduced in Next.js 13). The App Router is built on React Server Components and offers more powerful features for modern web applications. Here are the main differences between them: | Feature | Page Router | App Router | | | | | | Directory | Uses pages/ directory | Uses app/ directory | | Routing | File based routing with files like pages/about.js | File based routing with folders and special files like app/about/page.js | | Components | All components are Client Components by default | All components are Server Components by default | | Layouts | Custom app.js and document.js for shared layouts | Native nested layouts using layout.js files | | Data Fetching | Uses getServerSideProps , getStaticProps , and getInitialProps | Uses async/await in Server Components with native fetch | | Loading States | Manual implementation required | Built in loading.js for streaming and suspense | | Error Handling | Custom error.js page | Built in error.js for error boundaries at any level | | Streaming | Limited support | Built in support for streaming with Suspense | | Server Actions | Not available | Native support for server side mutations | | Metadata | Using Head component from next/head | Native Metadata API with metadata object or generateMetadata function | | Rendering | SSR, SSG, ISR, and CSR | SSR, SSG, ISR, CSR plus React Server Components | Example of Page Router structure: Example of App Router structure: Note: The App Router is recommended for new Next.js applications as it provides better performance, simpler data fetching patterns, and improved developer experience with React Server Components.

Question

Accepted Answer

Next.js provides two different routing systems: the Page Router (traditional) and the App Router (introduced in Next.js 13). The App Router is built on React Server Components and offers more powerful features for modern web applications.

Here are the main differences between them:

Feature	Page Router	App Router
Directory	Uses `pages/` directory	Uses `app/` directory
Routing	File-based routing with files like `pages/about.js`	File-based routing with folders and special files like `app/about/page.js`
Components	All components are Client Components by default	All components are Server Components by default
Layouts	Custom `_app.js` and `_document.js` for shared layouts	Native nested layouts using `layout.js` files
Data Fetching	Uses `getServerSideProps`, `getStaticProps`, and `getInitialProps`	Uses `async/await` in Server Components with native `fetch`
Loading States	Manual implementation required	Built-in `loading.js` for streaming and suspense
Error Handling	Custom `_error.js` page	Built-in `error.js` for error boundaries at any level
Streaming	Limited support	Built-in support for streaming with Suspense
Server Actions	Not available	Native support for server-side mutations
Metadata	Using `Head` component from `next/head`	Native Metadata API with `metadata` object or `generateMetadata` function
Rendering	SSR, SSG, ISR, and CSR	SSR, SSG, ISR, CSR plus React Server Components

Example of Page Router structure:

pages/
├── index.js          // Home page (/)
├── about.js          // About page (/about)
├── _app.js           // Custom App component
├── _document.js      // Custom Document
└── posts/
└── [id].js       // Dynamic route (/posts/:id)

Example of App Router structure:

app/
├── page.js           // Home page (/)
├── layout.js         // Root layout
├── loading.js        // Loading UI
├── error.js          // Error UI
├── about/
│   └── page.js       // About page (/about)
└── posts/
└── [id]/
└── page.js   // Dynamic route (/posts/:id)

Note: The App Router is recommended for new Next.js applications as it provides better performance, simpler data fetching patterns, and improved developer experience with React Server Components.