App Router and Pages Router

[anilaamanat2]

Summary

Can everybody explain the difference in simple way?

Additional information

No response

Example

No response

[icyJoseph]

Pages Router lives in the pages/ directory. Every file becomes a route. You fetch data with special functions like getServerSideProps or getStaticProps that run on the server and pass props to your component. Layouts are handled with _app.js which wraps every page.

App Router lives in the app/ directory. Routes are folders, and you use file conventions like page.js, layout.js, loading.js, error.js to define what each route does. Components are Server Components by default, that's the new thing here, they run on the server and never ship JavaScript to the browser. The classic React components you're used to (with useState, useEffect, event handlers, etc.) still work exactly the same, they're now called Client Components and you opt into them by adding "use client" at the top of the file.

One practical difference, among others, is that with Pages Router, you'd write a getServerSideProps function, return { props: { ... } }, and your component receives those props, to render a router. With App Router, in Server Components you just write async function MyComponent() and fetch whatever you need directly.

App Router is what you should use for new projects. Pages Router is still supported and isn't going away.

• https://nextjs.org/docs/app/getting-started
• https://nextjs.org/docs/pages/getting-started

[Toygarmetu]

Great question! Here's a simple breakdown:

Pages Router (the original Next.js routing system)

• Files in /pages directory automatically become routes
• getServerSideProps, getStaticProps, getStaticPaths for data fetching
• Each page is a React component exported as default
• Simpler mental model, been around since Next.js early days

App Router (introduced in Next.js 13, stable in 14+)

• Files live in /app directory
• Uses React Server Components by default — components run on the server, reducing JS sent to the client
• Data fetching happens directly inside components using async/await
• More powerful layouts with nested layout.tsx files
• Better for streaming, Suspense, and partial rendering

Simple rule of thumb:

• New project? → Use App Router
• Existing project or simpler use case? → Pages Router still works great

The App Router has a steeper learning curve but gives you more performance and flexibility out of the box.