Next.js имеет две системы маршрутизации. Pages Router (pages/) — это оригинальная система; App Router (app/, с Next 13) — это новая, рекомендуемая система, построенная вокруг React Server Components.
Next.js имеет две системы маршрутизации. 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, nested layouts, streaming).
Понимание того, чем она отличается от устаревшего Pages Router — особенно использования server-first по умолчанию и модели layout — необходимо для работы с любой современной кодовой базой Next.js.