X'inhu d-differenza bejn l-App Router u l-Pages Router?

Question

Accepted Answer

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. ## Differenzi ta' fajl u konvenzjoni ```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 ``` ## Il-bidla kunċettwali ewlenija: Server Components ```tsx // 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

{u.name}

; } ``` 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. ## X'jiżżid l-App Router - **Layouts nested** li jibqgħu fil-navigazzjoni (`layout.tsx`). - **Server Components** (inqas kliyent JS, aċċess dirett mid-data). - **Streaming** b'`loading.tsx` / Suspense. - **Server Actions** għal mutazzjonijiet mingħajr roti API. ## Liema wieħed għandek tuża 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. ## Għaliex hija importanti 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.