Two Routing Systems
Pages Router (legacy): pages/ directory, file-based routing, getServerSideProps, getStaticProps.
App Router (modern): app/ directory, React Server Components, layouts, nested routing.
Key Differences
| Feature | Pages Router | App Router |
|---|---|---|
| Directory | pages/ | app/ |
| Default components | Client | Server |
| Data fetching | getServerSideProps | async Server Components |
| Layouts | _app.js manual | layout.tsx nested |
| Loading states | Manual | loading.tsx |
Interview Questions
Q: Why did Next.js introduce the App Router?
- Native React Server Components
- Better streaming and Suspense
- Colocation of loading, error, and layout files
- Improved data fetching patterns
Q: Can you use both in one project?
Yes — app/ and pages/ can coexist during migration. App Router takes precedence for conflicting routes.
Q: When would you still use Pages Router?
Legacy projects, simpler client-only apps, or when team isn't ready for RSC mental model.
Migration Tip
Start new features in app/, migrate high-traffic pages first, keep API routes in either location.