Roadmap › Next.js — App Router, Folder Structure, Rendering and Full Stack with SQL Server › Module: Production
Lessons in this course (8)
8. Pages Router (legacy) vs App Router
IntermediateMediumLesson 8 of 8
Many existing apps still use the Pages Router (pages/ folder):
text
pages/
├── _app.tsx wraps every page (global CSS, providers)
├── _document.tsx custom <html>/<body>
├── index.tsx "/"
├── products/[id].tsx "/products/42"
└── api/products.ts API route: export default function handler(req, res)tsx
// Pages Router data fetching
export async function getServerSideProps({ params }) { return { props: { product: await getProduct(Number(params.id)) } }; } // per request
export async function getStaticProps() { return { props: { products: await listProducts() }, revalidate: 60 }; } // build + ISR
export async function getStaticPaths() { return { paths: [], fallback: "blocking" }; }| Pages Router | App Router |
|---|---|
getServerSideProps / getStaticProps | async Server Components + fetch/DB calls, revalidate, generateStaticParams |
_app.tsx / _document.tsx | app/layout.tsx |
API routes pages/api/*.ts | Route handlers app/**/route.ts + Server Actions |
| All components are client components | Server Components by default |
next/head | Metadata API |
Both routers can coexist during a gradual migration.