React framework (full stack)

Built-in support for SSR, SSG, ISR
Good SEO
File-based routing
Built-in performance optimizations
- Image Optimization (next/image)
- Font Optimization (next/font)
- Code splitting automatically
- Prefetching routes
Backend capabilities (API routes)

App Router vs Pages Router

Aspect	Pages Router	App Router
Status	Legacy (still supported)	Modern & Recommended
Folder	`pages/`	`app/`
Components	Client Components only	Server Components by default
Data Fetching	`getStaticProps`, `getServerSideProps`	`fetch()` with caching controls
Layouts	`_app.tsx`, `_document.tsx`	`layout.tsx` (nested)
Streaming	❌	✅ (Suspense)
Colocation	❌	✅ (route = folder)

Pages Router

pages/
├─ index.tsx        → /
├─ blog/[id].tsx    → /blog/123
├─ _app.tsx         → Global wrapper
├─ _document.tsx    → HTML structure
└─ api/
		└─ users.ts     → /api/users
// Each file = a page rendered with React on client + optional server hooks

Rendering control

getStaticProps → SSG
getServerSideProps → SSR
getInitialProps → legacy (avoid)

Problems

Hard to share layouts