Next.js-ს აქვს ორი მარშrutизйიsystemა. Pages Router (pages/) ორიგინალური; App Router (app/, Next 13-დან) უფრო ახალი, რეკომენდებული, რომელიც აგებულია 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>;
}
App Router-ში კომპონენტები არიან Server Components ნაგულისხმევად — ისინი გაშვებული აქვთ სერვერზე, შეუძლიათ პირდაპირ await მონაცემები და ამ კომპონენტისთვის ბრაუზერში ნულოვანი JS იგზავნება. Pages Router ამის ნაცვლად იყენებდა სპეციალურ ფუნქციებს (getServerSideProps) მონაცემების კლიენტ-რენდერირებული გვერდებში გადასაცემად.
layout.tsx).loading.tsx / Suspense-ით.გამოიყენეთ App Router ახალი პროექტებისთვის — ეს ის სფეროა, სადაც Next.js განვითარება ფოკუსირებულია. Pages Router ჯერ კიდევ მხარდაჭერილია (და ორივე შეიძლება თანაარსებობდეს ერთ აპლიკაციაში) მაგრამ არსებითად ტექნიკური მხარდაჭერის რეჟიმში მუშაობს.
App Router წარმოადგენს Next.js-ის მიმდინარე არქიტექტურას (Server Components, ჩასმული განლაგებები, streaming).
მისი განსხვავების ცოდნა legacy Pages Router-დან — განსაკუთრებით server-first მნიშვნელობა და განლაგების მოდელი — აუცილებელია ნებისმიერი თანამედროვე Next.js codebase-ში მუშაობისთვის.