У чому відмінність app від pages router у Next.js?

Next.jsMiddle~1 хв читання

У Next.js є два роутери - Pages Router і App Router. Вони вирішують одну задачу (роутинг), але підходи та можливості у них принципово різні.

Коротко

Pages Router - старий, page-based, клієнтський підхід App Router - новий, component-based, серверний підхід (рекомендований)

Pages Router (`pages/`)

Класичний варіант (до Next 13)

Особливості

Роут = файл у pages/
Весь рендер - client-first
Дані завантажуються через:
- getServerSideProps
- getStaticProps
Один layout на весь застосунок
Немає Server Components

Приклад

txt

pages/
 ├─ index.tsx        → /
 ├─ blog.tsx         → /blog
 └─ blog/[slug].tsx  → /blog/post

Плюси

простий і зрозумілий
звичний після React Router
багато старих туторіалів

Мінуси

багато boilerplate
більше JS у браузері
застаріла архітектура

App Router (`app/`)

Сучасний підхід (Next 13+)

Особливості

Роут = папка з page.tsx
Server Components типово
Layout'и на будь-якому рівні
Streaming, Suspense, partial rendering
Server Actions замість API
Гнучкий контроль кешу та даних

Приклад

txt

app/
 ├─ layout.tsx
 ├─ page.tsx          → /
 └─ blog/
    ├─ layout.tsx
    └─ [slug]/
       └─ page.tsx    → /blog/post

Плюси

менше JS на клієнті
краще SEO і performance
масштабована архітектура
підходить для складних UI

Мінуси

вищий поріг входу
більше нових концепцій
вимагає розуміння SSR і кешів

Головна відмінність - філософія

	Pages Router	App Router
Підхід	Page-based	Component-based
Рендер	Client-first	Server-first
Server Components	ні	так
Layout'и	Глобальний	Вкладені
Streaming	ні	так
Server Actions	ні	так
Майбутнє Next.js	ні	так

Що обрати сьогодні

Нові проекти на Pages Router - не рекомендується
Нові проекти на App Router - стандарт де-факто
Старі проекти можна мігрувати поступово

Коротка відповідь для співбесіди

Pages Router - це застарілий page-based роутер із клієнтським підходом, а App Router - сучасний server-first роутер із Server Components, layout'ами, streaming і кращою продуктивністю. App Router є рекомендованим варіантом у Next.js.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.