Класичні односторінкові застосунки (Single Page Applications, SPA) на базі чистого React (Vite / Create React App) віддають браузеру порожній HTML-контейнер (<div id="root"></div>) та масивний JavaScript-бандл. Браузер змушений завантажити мегабайти скриптів, розпарсити їх, виконати і лише потім надіслати мережеві запити до API за контентом. Це призводить до довгого білого екрана (високий Time to Interactive, поганий Largest Contentful Paint) та катастрофічних проблем з пошуковою індексацією (SEO).
Next.js 16 App Router здійснює фундаментальний архітектурний зсув: фреймворк переносить первинну генерацію інтерфейсу на сторону сервера (Node.js 24+). Браузер миттєво отримує готовий, семантично наповнений HTML-документ, стилізований через Tailwind CSS v4, який одразу видно користувачеві та пошуковим роботам.
Ключовою угодою Next.js є файлова маршрутизація (File-system Based Routing) всередині папки app/. Папки у файловій системі визначають шляхи в адресному рядку URL, а спеціальні зарезервовані імена файлів (page.tsx, layout.tsx, loading.tsx, error.tsx, not-found.tsx) формують ієрархію компонентів сторінки.
Погляньмо на різницю в архітектурі доставки контенту:
+-------------------------------------------------------------------------+
| АРХІТЕКТУРНИЙ ЗСУВ: SPA vs NEXT.JS 16 |
+-------------------------------------------------------------------------+
| ЧИСТИЙ REACT SPA (Клієнтський рендеринг): |
| Сервер віддає: <div id="root"></div> + 2.5 MB app.js |
| Браузер: Білий екран -> завантаження JS -> парсинг -> запит до API|
| Результат: TTFB швидкий, але реальний контент через 2.8 секунди! |
+-------------------------------------------------------------------------+
| NEXT.JS 16 APP ROUTER (Server Components): |
| Сервер віддає: Повноцінний HTML з готовим текстом та картинками |
| Браузер: Миттєвий показ першого кадру (FCP < 500 мс) |
| JS-бандл: Тільки інтерактивні острови ('use client') |
| Результат: Миттєвий First Contentful Paint, 100% SEO-доступність|
+-------------------------------------------------------------------------+Next.js аналізує URL (наприклад, /catalog) і знаходить відповідний файл app/catalog/page.tsx.
На сервері Node.js виконуються async Server Components, безпосередньо читаючи БД або викликаючи мікросервіси.
Браузер починає отримувати готові чанки HTML за протоколом HTTP/2 без очікування завершення всіх тривалих запитів.
Браузер завантажує компактний JS-бандл лише для інтерактивних кнопок та інпутів з директивою 'use client'.
Яка URL-адреса відповідатиме файлу компонента, розташованому за шляхом `app/dashboard/analytics/page.tsx`?
app/ та угоди про імена#У Next.js 16 зарезервовані спеціальні імена файлів:
page.tsx: унікальний UI маршруту. Без page.tsx папка вважається недоступною для прямого відвідування.layout.tsx: спільний інтерфейс (Header, Sidebar, Footer), що обгортає дочірні сторінки та зберігає стан при переходах.loading.tsx: вбудований Suspense-скелетон, що відображається миттєво, доки серверна сторінка завантажує дані.error.tsx: запобіжник помилок (Error Boundary) для ізольованого перехоплення збоїв.not-found.tsx: кастомний UI для HTTP-статусу 404.app/
├── layout.tsx # Кореневий лейаут (<html>, <body>, Nav)
├── page.tsx # Головна сторінка (/)
├── not-found.tsx # Глобальна сторінка 404
├── catalog/
│ ├── layout.tsx # Підлейаут каталогу (фільтри)
│ ├── page.tsx # Сторінка каталогу (/catalog)
│ └── [slug]/ # Динамічний маршрут (/catalog/macbook-pro)
│ └── page.tsx
└── api/
└── health/
└── route.ts # HTTP API ендпоінт (/api/health)app/page.tsx#За замовчуванням усі компоненти всередині app/ є React Server Components (серверними компонентами):
// Це Server Component: він виконується на сервері Node.js!
export default function HomePage() {
const serverTime = new Date().toLocaleTimeString();
return (
<main className="max-w-4xl mx-auto py-12 px-4 space-y-6">
<div className="inline-block px-3 py-1 text-xs font-semibold rounded-full bg-accent-violet/10 text-accent-violet border border-accent-violet/20">
Next.js 16 + React 19
</div>
<h1 className="text-4xl font-extrabold text-text-primary tracking-tight">
Ласкаво просимо до WPSKILLS
</h1>
<p className="text-text-muted leading-relaxed">
Серверний час генерації сторінки: <strong className="text-text-primary">{serverTime}</strong>.
Цей HTML згенеровано рушієм Next.js без затримок клієнтського JS.
</p>
<div className="pt-4">
<a
href="/catalog"
className="inline-flex items-center px-5 py-2.5 rounded-xl bg-accent-cyan text-bg-base font-semibold hover:opacity-90 transition-opacity"
>
Перейти до каталогу →
</a>
</div>
</main>
);
}У Next.js 16 Turbopack увімкнено за замовчуванням для локальної розробки, забезпечуючи прискорення збірки в 5–10 разів порівняно зі старим Webpack:
# Запуск через pnpm з компілятором Turbopack:
pnpm run dev
# Локальний сервер доступний за адресою:
# Ready in 450ms on http://localhost:3000Чи можна використовувати хук `useState` або обробник `onClick` безпосередньо всередині файлу `app/page.tsx` без додаткових директив?
Спроба викликати useState у серверному компоненті викличе фатальну помилку збірки Next.js:
// ПОМИЛКА:
export default function Page() {
const [count, setCount] = useState(0); // ЗБІЙ: Server Component не підтримує стан!
return <button onClick={() => setCount(1)}>Клік</button>;
}
// ПРАВИЛЬНО: винесіть інтерактивну кнопку в окремий файл з 'use client'!Звичайний тег <a href="/about"> викликає повне перезавантаження сторінки в браузері, скидаючи стан застосунку та змушуючи браузер повторно завантажувати всі ресурси. Завжди використовуйте компонент <Link href="/about"> для плавної навігації без перезавантаження (SPA-transitions).