Пошук уроків, статей та іншого контенту
React дає компоненти для UI, а Next.js добудовує навколо нього все, що потрібно для реального застосунку.
React (детально розібраний в окремому курсі) — бібліотека для побудови UI-компонентів, і свідомо не включає багато речей, потрібних майже кожному реальному застосунку: маршрутизацію між сторінками, серверний рендеринг для швидкого першого завантаження та SEO, розбиття коду на частини, оптимізацію зображень. У «чистому» React-застосунку (Single Page Application) усе це доводиться або збирати з окремих бібліотек, або писати самостійно.
Next.js бере React за основу для компонентів і добудовує навколо нього повний набір інструментів: файлову маршрутизацію (структура папок сама визначає URL-адреси), кілька стратегій рендерингу (статичну генерацію, серверний рендеринг на кожен запит, гібридні варіанти), Server Components (компоненти, що виконуються тільки на сервері й не потрапляють у JS-бандл клієнта), Server Actions для мутацій даних без окремого API-шару, оптимізацію зображень і шрифтів із коробки.
Тому Next.js називають метафреймворком — фреймворком, побудованим поверх іншої бібліотеки (React), а не альтернативою їй. Знання React — обов'язкова передумова: компоненти, props, хуки, стан у Next.js ті самі, що й у звичайному React.
У Next.js існує два підходи до маршрутизації: старіший Pages Router (папка pages/, де кожен файл — окрема сторінка з обмеженими можливостями рендерингу) і сучасний App Router (папка app/, з підтримкою Server Components, вкладених layout, паралельних маршрутів). App Router — стандартний вибір для нових проєктів і саме він розглядається в цьому курсі.
Next.js додає накладні витрати на налаштування й ширшу поверхню концепцій порівняно з простим React SPA — виправданий він там, де важливі перше завантаження сторінки, SEO (сторінки, які має індексувати пошуковик), чи потрібен серверний код (звернення до бази даних, приховані API-ключі) поруч з UI-кодом у тому самому проєкті.
Починати вивчати Next.js без впевненого знання React — компоненти, props, хуки, умовний рендеринг залишаються фундаментом, Next.js лише додає шар зверху.
Плутати Next.js із бібліотекою на кшталт React Router — це повноцінний фреймворк із власними серверними можливостями, а не лише клієнтський роутер.
Вважати, що Next.js підходить винятково для «серверного рендерингу» — насправді він охоплює весь спектр від повністю статичних сторінок до динамічного рендерингу на кожен запит, і дозволяє обирати стратегію окремо для кожного маршруту.
Next.js — це React-фреймворк: React відповідає за компоненти й UI-логіку, а Next.js добудовує маршрутизацію, стратегії рендерингу, Server Components, Server Actions та оптимізації, потрібні для production-застосунку. App Router (папка app/) — сучасний, рекомендований спосіб організації маршрутів, і саме на ньому побудований решта цього курсу.