Next.js għandu żewġ sistemi ta' routing. Il-Pages Router (pages/) huwa l-oriġinali; l-App Router (app/, minn Next 13 'il quddiem) huwa l-aktar ġdid, irrakkomandatt, mibni madwar React Server Components.
Next.js għandu żewġ sistemi ta' routing. Il-Pages Router (pages/) huwa l-oriġinali; l-App Router (app/, minn Next 13 'il quddiem) huwa l-aktar ġdid, irrakkomandatt, mibni madwar 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>;
}
Fl-App Router, il-komponenti huma Server Components b'default — huma jissornu fuq is-server, jistgħu await data direttament, u jibagħtu żero JS għal dak il-komponent lejn il-browser. Il-Pages Router minflok ħadem funzjonijiet speċjali (getServerSideProps) biex jgħaddu data fl-isfar li ġew irrenduti min-naħa tal-kliyent.
layout.tsx).loading.tsx / Suspense.Uża l-App Router għal proġetti ġodda — din hija fejn il-ħidma tal-iżviluppi ta' Next.js hija ffokussata. Il-Pages Router għad hu ssokkorsu (u t-tnejn jistgħu jeżistu flimkien f'applikazzjoni waħda) iżda essenzjalment huwa f'modalità ta' manutenzjoni.
L-App Router jirrappreżenta l-arkitettura attwali ta' Next.js (Server Components, nested layouts, streaming).
Il-għarfien ta' kif hija differenti mil-Pages Router legacy — speċjalment id-default server-first u l-mudell ta' layout — hija essenzjali biex taħdem f'kwalunkwe codebase ta' Next.js moderni.