Next.js मध्ये दोन राउटिंग सिस्टम आहेत. Pages Router (pages/) मूळ आहे; App Router (app/, Next 13 पासून) नवीन, सुप्पारिशित आहे, जो React Server Components भोवती बांधलेला आहे.
फाइल आणि परिपाटी मतभेद
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 मध्ये, घटक डिफॉल्टनुसार Server Components आहेत — ते सर्व्हरवर चालतात, थेट await डेटा करू शकतात, आणि ब्राउজरला त्या घटकासाठी शून्य JS पाठवतात. Pages Router त्याऐवजी डेटा क्लायंट-रेंडर केलेल्या पृष्ठांमध्ये पास करण्यासाठी विशेष कार्ये (getServerSideProps) वापरत होता.
layout.tsx).loading.tsx / Suspense सह स्ट्रीमिंग.नवीन प्रकल्पांसाठी App Router वापरा — हेच आहे जिथे Next.js विकास केंद्रीभूत आहे. Pages Router अजूनही समर्थित आहे (आणि दोन्ही एका अ्यापमध्ये एकसाथ अस्तित्वात असू शकतात) परंतु मूलत: देखभाल मोडमध्ये आहे.
App Router Next.js चे वर्तमान आर्किटेक्चर (Server Components, नेस्टेड लेआउट, स्ट्रीमिंग) प्रतिनिधित्व करते.
लिगसी Pages Router पासून हे कसे वेगळे आहे हे जाणून घेणे — विशेषत: server-first डिफॉल्ट आणि लेआउट मॉडल — कोणत्याही आधुनिक Next.js कोडबेसमध्ये काम करण्यासाठी आवश्यक आहे.
सविस्तर उत्तरांसह IT मुलाखत प्रश्नांचे ग्रंथालय — Junior पासून Senior पर्यंत.
देणगी द्या