Next.js ka dy sisteme rutimi. Pages Router (pages/) është origjinali; App Router (app/, që nga Next 13) është më i ri, i rekomanduar, i ndërtuar rreth 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>;
}
Në App Router, komponentët janë Server Components si parazgjedhje — ato ekzekutohen në server, mund të await të dhëna drejtpërdrejt, dhe dërgojnë zero JS për atë komponent në shfletuesin. Pages Router në vend të kësaj përdorte funksione të veçanta (getServerSideProps) për të kaluar të dhëna në faqe të riprodhuar në klient.
layout.tsx).loading.tsx / Suspense.Përdorni App Router për projekteet e reja — ky është vendi ku zhvillimi i Next.js është i fokusuar. Pages Router është akoma i mbështetur (dhe të dy mund të koeksistojnë në një aplikacion) por është në thelb në modalitetin e mirëmbajtjes.
App Router përfaqëson arkitekturën aktuale të Next.js (Server Components, layouts të imbriçuar, streaming).
De të dihet se si ndryshon nga Pages Router i trashëguara — veçanërisht parazgjedhja server-first dhe modeli i layout — është thelbësor për punën në çdo codebase moderne të Next.js.