Next.js ma dwa systemy routingu. Pages Router (pages/) jest oryginalnym; App Router (app/, od Next 13) jest nowszym, zalecanym systemem zbudowanym wokół 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>;
}
W App Router komponenty są domyślnie Server Components — działają na serwerze, mogą bezpośrednio czekać (await) na dane i wysyłają zero JS dla tego komponentu do przeglądarki. Pages Router zamiast tego używał specjalnych funkcji (getServerSideProps) do przekazywania danych do stron renderowanych po stronie klienta.
layout.tsx).loading.tsx / Suspense.Używaj App Router do nowych projektów — to tutaj skupia się rozwój Next.js. Pages Router jest nadal obsługiwany (i oba mogą istnieć w jednej aplikacji), ale zasadniczo jest w trybie utrzymania.
App Router reprezentuje obecną architekturę Next.js (Server Components, nested layouts, streaming).
Zrozumienie, czym różni się od starszego Pages Router — szczególnie domyślnego podejścia server-first i modelu layout — jest niezbędne do pracy w jakiejkolwiek nowoczesnej bazie kodowej Next.js.