EasyEcosystem📖 Theory Question

What is the difference between Next.js Pages Router and App Router?

💡

Hint

Pages Router = getServerSideProps/getStaticProps; App Router = RSC by default, layouts, streaming

Full Answer

Next.js 13+ introduced the App Router as a complete architectural shift:

FeaturePages RouterApp Router
Default component typeClient componentServer component
Data fetchinggetServerSideProps, getStaticPropsasync/await in component
Layouts_app.tsx + manuallayout.tsx nesting
Loading statesManualloading.tsx (Suspense)
Error handlingManualerror.tsx (Error Boundary)
Streaming❌✅ built-in
// App Router — data fetching is just async/await
// app/users/page.tsx
async function UsersPage() {
  const users = await fetch('/api/users').then(r => r.json());
  return ;
}

// Pages Router equivalent
export async function getServerSideProps() {
  const users = await fetch('/api/users').then(r => r.json());
  return { props: { users } };
}
export default function UsersPage({ users }) {
  return ;
}
💡 The App Router is the future of Next.js. New projects should use it. The Pages Router is in maintenance mode — it won't be removed but new features land in App Router only.

Practice this in a timed sprint →

5 free questions, no signup required

⚡ Start Sprint