Next.js are două sisteme de rutare. Pages Router (pages/) este cel original; App Router (app/, din Next 13) este cel mai nou și recomandat, construit în jurul 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, componentele sunt Server Components în mod implicit — rulează pe server, pot await date direct și trimit zero JS pentru acea componentă către browser. Pages Router, în schimb, folosea funcții speciale (getServerSideProps) pentru a transmite date paginilor renderate de client.
layout.tsx).loading.tsx / Suspense.Folosiți App Router pentru proiecte noi — aceasta este direcția de dezvoltare a Next.js. Pages Router este încă suportat (și ambele pot coexista într-o aplicație), dar este în esență în modul de mentenanță.
App Router reprezintă arhitectura actuală a Next.js (Server Components, nested layouts, streaming).
Înțelegerea modului în care diferă de Pages Router-ul moștenit — în special implicit server-first și modelul de layout — este esențial pentru lucrul în orice bază de cod Next.js modernă.