Next.js ਵਿੱਚ ਦੋ routing systems ਹਨ। 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 ਵਿੱਚ, components ਮੂਲ ਤੌਰ 'ਤੇ Server Components ਹਨ — ਉਹ ਸਰਵਰ 'ਤੇ ਚੱਲਦੇ ਹਨ, ਸਿੱਧੇ ਡਾਟਾ await ਕਰ ਸਕਦੇ ਹਨ, ਅਤੇ ਉਸ component ਲਈ ਬ੍ਰਾ਼ਊਜ਼ਰ ਨੂੰ ਜ਼ੀਰੋ JS ਭੇਜਦੇ ਹਨ। Pages Router ਇਸ ਦੀ ਜਗ੍ਹਾ ਵਿਸ਼ੇਸ਼ ਫੰਕਸ਼ਨਾਂ (getServerSideProps) ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਸੀ ਡਾਟਾ client-rendered ਪੰਨਿਆਂ ਵਿੱਚ ਪਾਸ ਕਰਨ ਲਈ।
layout.tsx)।loading.tsx / Suspense ਨਾਲ।ਨਵੀਂ ਪ੍ਰਾਜੈਕਟਸ ਲਈ App Router ਵਰਤੋ — ਇਥੇ Next.js ਡਵੈਲਪਮੈਂਟ ਫੋਕਸ ਹੈ। Pages Router ਅਜੇ ਵੀ ਸਮਰਥਿਤ ਹੈ (ਅਤੇ ਦੋਹੇ ਇੱਕ app ਵਿੱਚ ਮੌਜੂਦ ਹੋ ਸਕਦੇ ਹਨ) ਪਰ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਰਖ-ਰਖਾਅ ਮੋਡ ਵਿੱਚ ਹੈ।
App Router Next.js ਦੀ ਮੌਜੂਦਾ ਆਰਕਿਟੈਕਚਰ ਦੀ ਨੁਮਾਇੰਦਗੀ ਕਰਦਾ ਹੈ (Server Components, nested layouts, streaming)।
ਇਹ ਜਾਣਨਾ ਕਿ ਇਹ legacy Pages Router ਤੋਂ ਕਿਵੇਂ ਵੱਖਰਾ ਹੈ — ਖ਼ਾਸ ਕਰ server-first ਡਿਫਾਲਟ ਅਤੇ layout ਮਾਡਲ — ਕਿਸੇ ਵੀ ਆਧੁਨਿਕ Next.js codebase ਵਿੱਚ ਕਾਮ ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ ਹੈ।