Next.js má dva routing systémy. Pages Router (pages/) je původní; App Router (app/, od Next 13) je novější, doporučovaný, postaven kolem React Server Components.
Rozdíly v souborech a konvencích
text
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>;
}
V App Router jsou komponenty Server Components ve výchozím nastavení — běží na serveru, mohou přímo await data a neposílají žádný JS pro danou komponentu do prohlížeče. Pages Router místo toho používal speciální funkce (getServerSideProps) k předání dat do klientem renderovaných stránek.
layout.tsx), které přetrvávají mezi navigací.loading.tsx / Suspense.V nových projektech použijte App Router — je to místo, kde se zaměřuje vývoj Next.js. Pages Router je stále podporován (a oba mohou v jedné aplikaci koexistovat), ale je v podstatě v režimu údržby.
App Router představuje současnou architekturu Next.js (Server Components, vnořené layouty, streaming).
Znalost toho, jak se liší od starého Pages Router — zejména výchozího nastavení na serveru a modelu layoutu — je nezbytná pro práci v jakékoli moderní Next.js codebase.