Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чим app відрізняється від pages у Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Коротко: `app` - **сучасний, потужний і "правильний" шлях**, `pages` - **старий, зрозумілий і все ще робочий**. **Ключове:** `pages` - легасі-роутер з даними через `getServerSideProps`/`getStaticProps` і без вкладених layout, а `app` - основний, рекомендований роутер із Server Components за замовчуванням, вкладеними layout, streaming і server actions.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняКоротко: `app` **- сучасний, потужний і "правильний" шлях**, `pages` **- старий, зрозумілий і все ще робочий**. Тепер розкладемо **чітко і без води**, щоб було зрозуміло *коли і навіщо*. --- ## Загальне У **Next.js** є **два роутери**: | | `pages` | `app` | | --- | --- | --- | | Статус | legacy | **основний (recommended)** | | Підхід | React + SPA | **React Server Components** | | Рік появи | ~2016 | **2023+** | | Майбутнє | підтримка є | **сюди йде розвиток** | ### Як працює ``` pages/ ├─ index.tsx → / ├─ blog.tsx → /blog └─ users/[id].tsx → /users/1 ``` ### Характеристики - все - **Client Components** - дані через `getServerSideProps`, `getStaticProps` - немає вкладених layout - немає стрімінгу - немає server actions - `_app.tsx`, `_document.tsx` - милиці глобальності ```ts export async function getServerSideProps() { return { props: { data } } } ``` --- ## App Router (`app/`) - сучасний стандарт   ### Як працює ``` app/ ├─ layout.tsx ├─ page.tsx → / ├─ blog/ │ └─ page.tsx → /blog └─ users/[id]/ └─ page.tsx → /users/1 ``` ### Ключові відмінності - **Server Components типово** - вкладені `layout.tsx` - streaming + loading states - server actions (без API) - parallel routes / slots - route groups `(auth)` - складніше ментально --- ## Головна архітектурна відмінність ### `pages` > **Сторінка = компонент** ### `app` > **Сторінка = дерево сегментів** > (layout → loading → error → page) --- ## Робота з даними ### `pages` ```ts getServerSideProps getStaticProps getInitialProps ``` ### `app` ```ts const data = await fetch(...) const data = await prisma.task.findMany() ``` Прямо **в компоненті**, без прокладок. --- ## Layout'и ### `pages` - глобальний `_app.tsx` - немає вкладеності ### `app` ```txt app/ ├─ layout.tsx # global └─ dashboard/ └─ layout.tsx # тільки для /dashboard/* ``` --- ## Продуктивність | | pages | app | | --- | --- | --- | | JS у браузері | багато | **менше** | | SSR | так | **так (розумніше)** | | Streaming | ні | **так** | | Partial render | ні | **так** | --- ## Server Actions (killer-feature `app`) ```ts "use server"; export async function submit(formData: FormData) { await prisma.task.create(...) } ``` - без API - без fetch - типобезпечно - швидше У `pages` **цього немає**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.