Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «У чому відмінність app від pages router у Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)У **Next.js** є **два роутери** - **Pages Router** і **App Router**. Вони вирішують одну задачу (роутинг), але **підходи та можливості у них принципово різні**. **Ключове:** Pages Router - це застарілий page-based роутер із клієнтським підходом, а App Router - сучасний server-first роутер із Server Components, layout'ами, streaming і кращою продуктивністю. App Router є рекомендованим варіантом у Next.js.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняУ **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.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.