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 થી કેવી રીતે અલગ છે — ખાસ કરીને server-first ડિફોલ્ટ અને લેઆઉટ મોડલ — કોઈપણ આધુનિક Next.js કોડબેસમાં કામ કરવા માટે આવશ્યક છે.
વિગતવાર જવાબો સાથે IT ઇન્ટરવ્યૂ પ્રશ્નોની લાઇબ્રેરી — જુનિયરથી સિનિયર સુધી.
દાન કરો