Next.js has two routing systems. The Pages Router (pages/) is the original; the App Router (app/, since Next 13) is the newer, recommended one built around React Server Components.
Next.js has two routing systems. The Pages Router (pages/) is the original; the App Router (app/, since Next 13) is the newer, recommended one built around React Server Components.
Pages Router (pages/) App Router (app/)
──────────────────────────────────────────────────────
pages/about.tsx → /about app/about/page.tsx → /about
Default export = page page.tsx = page, layout.tsx = layout
getServerSideProps (SSR) async Server Components (fetch directly)
getStaticProps (SSG) fetch() with caching options
_app.tsx / _document.tsx Nested layout.tsx files
All components client-rendered Server Components by default
// App Router — a Server Component that fetches data directly, no extra API
// app/users/page.tsx
export default async function Users() {
const res = await fetch("https://api.example.com/users"); // runs on the SERVER
const users = await res.json();
return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
In the App Router, components are Server Components by default — they run on the server, can await data directly, and send zero JS for that component to the browser. The Pages Router instead used special functions (getServerSideProps) to pass data into client-rendered pages.
layout.tsx).loading.tsx / Suspense.Use the App Router for new projects — it's where Next.js development is focused. The Pages Router is still supported (and the two can coexist in one app) but is essentially in maintenance mode.
The App Router represents Next.js's current architecture (Server Components, nested layouts, streaming).
Knowing how it differs from the legacy Pages Router — especially the server-first default and layout model — is essential for working in any modern Next.js codebase.
A library of IT interview questions with detailed answers — from Junior to Senior.
Donate