Next.js میں دو routing systems ہیں۔ Pages Router (pages/) اصل ہے؛ App Router (app/، Next 13 سے) نیا، سفارش شدہ ہے جو React Server Components کے ارد گرد بنایا گیا ہے۔
فائل اور convention میں فرق
text
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 میں، components بطور Server Components ڈیفالٹ ہیں — وہ server پر چلتے ہیں، براہ راست await کر سکتے ہیں، اور اس component کے لیے صفر JS browser کو بھیجتے ہیں۔ Pages Router نے بجائے special functions (getServerSideProps) استعمال کیے ڈیٹا کو client-rendered صفحات میں ڈالنے کے۔
layout.tsx)۔loading.tsx / Suspense کے ساتھ۔App Router نئے projects کے لیے استعمال کریں — یہ وہ ہے جہاں Next.js development توجہ مرکوز ہے۔ Pages Router ابھی بھی supported ہے (اور دونوں ایک app میں coexist کر سکتے ہیں) لیکن بنیادی طور پر maintenance mode میں ہے۔
App Router Next.js کی موجودہ architecture کی نمائندگی کرتا ہے (Server Components، nested layouts، streaming)۔
یہ جاننا کہ یہ legacy Pages Router سے کیسے مختلف ہے — خاص طور پر server-first ڈیفالٹ اور layout model — کسی بھی جدید Next.js codebase میں کام کرنے کے لیے ضروری ہے۔