Next.js yana da tsarin turi guda biyu. Pages Router (pages/) shine na asali; App Router (app/, tun Next 13) shine sabuwa, mai shawarar amfani wacce aka gina kewaye da 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>;
}
A cikin App Router, abubuwan haɗi sune Server Components ta tsohuwa — suna aiki a kan sabar, suna iya await bayanai kai tsaye, kuma suna aika sifili JS ga wannan haɗin zuwa mai lantarki. Pages Router a maimakon haka ya yi amfani da ayyukan musamman (getServerSideProps) don watsa bayanai zuwa shafukan da aka fitar da hannu.
layout.tsx).loading.tsx / Suspense.Yi amfani da App Router don sabbin ayyuka — nan ne abin da haɓaka Next.js ke mayar da hankali. Pages Router har yanzu ana sanin (kuma biyu zasu iya wanzu a cikin jiya gida) amma ya fi kasance a cikin kudin tantanin.
App Router ya nuna gidan Next.js na zamani (Server Components, Layouts da aka haɗa, streaming).
Sanin yadda ya bambanta da tsohon Pages Router — musamman tsohuwar sabar da bambangari na layout — ya zama mahimma don aiki a kowane kodeb Next.js na zamani.