Next.js turi dvi maršrutizavimo sistemas. Pages Router (pages/) yra originali; App Router (app/, nuo Next 13) yra naujesnė, rekomenduojama, sukurta aplink React Server Components.
Next.js turi dvi maršrutizavimo sistemas. Pages Router (pages/) yra originali; App Router (app/, nuo Next 13) yra naujesnė, rekomenduojama, sukurta aplink 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 komponentai yra Server Components pagal numatytuosius nustatymus — jie veikia serveryje, gali tiesiogiai await duomenis ir siuntia nulinį JS tam komponentui į naršyklę. Pages Router vietoj to naudojo specialias funkcijas (getServerSideProps), kad perduotų duomenis į kliento pusėje atvaizdavusias puslapius.
layout.tsx).loading.tsx / Suspense.Naudokite App Router naujiems projektams — čia sukoncentruota Next.js kūrimo veikla. Pages Router vis dar palaikoma (ir abu gali bendra tame pačiame programoje), tačiau iš esmės yra techninės priežiūros režime.
App Router atspindi dabartinę Next.js architektūrą (Server Components, įdėti maketai, srautinis perdavimas).
Žinojimas, kaip ji skiriasi nuo pasenusio Pages Router — ypač server-first numatytumo ir maketų modelio — yra būtinas darbui bet kurioje šiuolaikinėje Next.js kodų bazėje.