Next.js రెండు రూటింగ్ సిస్టమ్లను కలిగి ఉంది. Pages Router (pages/) అసలైనది; App Router (app/, Next 13 నుండి) నవీనమైనది, సిఫారసు చేయబడినది 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>;
}
App Router లో, భాగాలు డిఫాల్ట్గా Server Components — అవి సర్వర్పై నడుస్తాయి, నేరుగా డేటాను await చేయగలవు, మరియు ఆ భాగం కోసం బ్రౌజర్కు జీరో JS పంపుతాయి. Pages Router బదులుగా సిన్క్ష్టూ ఆర్డీ ఫంక్షన్లను (getServerSideProps) ఉపయోగించి క్లయింట్-రెండర్డ్ పేజీలలోకి డేటాను పాస్ చేసింది.
layout.tsx).loading.tsx / Suspense తో.నవీన ప్రాజెక్టుల కోసం App Router ను ఉపయోగించండి — Next.js డెవలప్మెంట్ ఇక్కడ ఫోకస్డ్. Pages Router ఇప్పటికీ సపోర్టెడ్ (మరియు రెండూ ఒక యాప్లో సహ-ఉనికిలో ఉండవచ్చు) కానీ ఇది ఎక్కువగా మెయిన్టెనెన్స్ మోడ్లో ఉంది.
App Router Next.js యొక్క ప్రస్తుత ఆర్కిటెక్చర్ను సూచిస్తుంది (Server Components, నెస్టెడ్ లేआউట్లు, streaming).
ఇది లిగేసీ Pages Router నుండి ఎలా భిన్నమైనది అని తెలుసుకోవడం — ముఖ్యంగా సర్వర్-ఫర్స్ట్ డిఫాల్ట్ మరియు లేఅవుట్ మోడల్ — ఏదైనా ఆధునిక Next.js codebase లో పనిచేయడానికి ఆవశ్యకమైనది.