Next.js ina mifumo miwili ya uelekezaji. Pages Router (pages/) ni ile ya asili; App Router (app/, tangu Next 13) ni ile mpya, inayopendekezwa iliyojengwa karibu na 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>;
}
Katika App Router, sehemu za utengenezaji ni Server Components kwa chaguo-msingi — zinafanya kazi kwenye seva, zinaweza await data moja kwa moja, na kutuma JS sifuri kwa sehemu hiyo kwenye kivinjari. Pages Router badala yake ilitumia kazi maalum (getServerSideProps) kupitisha data kwenye kurasa zilizokamatia mteja.
layout.tsx).loading.tsx / Suspense.Tumia App Router kwa miradi mipya — hapa ndipo maendeleo ya Next.js yanalekezwa. Pages Router bado inaunzwa (na zote mbili zinaweza kuishirikiana katika programu moja) lakini kwa asili ni katika hali ya huduma.
App Router inawakilisha usanifu wa sasa wa Next.js (Server Components, mipangilio inayofunika, streaming).
Kujua jinsi inavyotofautiana na Pages Router ya zamani — hasa chaguo-msingi la seva kwanza na mtindo wa mipangilio — ni muhimu kwa kufanya kazi katika codebase yoyote ya Next.js ya kisasa.