Перейти до контенту

fullstack.org.ua

Навчання Статті Практика Інструменти Roadmaps

Пошук

Пошук уроків, статей та іншого контенту

fullstack.org.ua

Українська освітня платформа для розробників: курси, статті, практика та інструменти.

Навчання Статті Практика Інструменти Roadmaps

© 2026 fullstack.org.ua

Політика конфіденційності Умови використання

Навчання / Next.js

Next.js

Середній

React-фреймворк для production: App Router, Server Components, SEO та продуктивність.

196 уроків · ~43 год

Передумови: React

Вступ до Next.js

Що таке Next.js і навіщо він потрібен12 хв
Next.js vs React15 хв
Створення Next.js проєкту8 хв
Структура Next.js проєкту13 хв
App Router13 хв
app directory9 хв
layout.tsx та page.tsx8 хв
Server Components та Client Components — основи14 хв
Директива "use client"13 хв
Запуск та конфігурація Next.js10 хв

Routing та навігація

Основи routing в App Router10 хв
Static та Dynamic Routes13 хв
Dynamic Segments [slug]8 хв
Catch-all та Optional Catch-all Routes10 хв
Nested Routes10 хв
Route Groups12 хв
Private Folders11 хв
Link та навігація7 хв
useRouter, usePathname, useSearchParams13 хв
Query Parameters14 хв
Redirects та notFound()11 хв
Loading та Error UI11 хв
error.tsx та not-found.tsx11 хв
template.tsx11 хв

Layouts, UI та компоненти

Root Layout: кореневий layout застосунку10 хв
Nested Layouts: вкладені layouts11 хв
Shared UI: спільний інтерфейс9 хв
Server Components: серверні компоненти14 хв
Client Components: клієнтські компоненти11 хв
Коли використовувати Client Component16 хв
Передача даних між Server та Client Components15 хв
Server Components як спосіб зменшити JavaScript Bundle13 хв
Composition Patterns: композиція компонентів13 хв
Suspense у компонентах Next.js11 хв
Loading UI та Streaming13 хв
Parallel Routes: паралельні маршрути13 хв
Intercepting Routes: перехоплення маршрутів13 хв

Data Fetching та робота з даними

Fetch у Server Components9 хв
Архітектура Data Fetching у Next.js13 хв
Робота з базою даних на сервері15 хв
ORM та Prisma у Next.js13 хв
Server-only Code12 хв
Request та Response у Next.js17 хв
Послідовні та паралельні запити14 хв
Loading та Error States12 хв
Dynamic Data13 хв
Streaming Data15 хв
Data Fetching у Client Components13 хв
TanStack Query у Next.js21 хв
Server State vs Client State21 хв

Caching та Revalidation

Як працює кешування в Next.js14 хв
Request Memoization9 хв
Data Cache12 хв
Full Route Cache14 хв
Router Cache11 хв
Static Rendering і Dynamic Rendering12 хв
Dynamic Functions17 хв
Параметр revalidate12 хв
Time-based Revalidation11 хв
On-demand Revalidation12 хв
revalidatePath10 хв
revalidateTag11 хв
cacheTag11 хв
unstable_cache15 хв
Директива use cache14 хв
Cache Components14 хв
Комбінування статичного й динамічного контенту22 хв

Server Actions та мутації даних

Що таке Server Actions9 хв
Директива "use server"11 хв
Виклик Server Action з форми6 хв
Передача аргументів у Server Actions10 хв
Валідація даних у Server Actions13 хв
Валідація Server Actions за допомогою Zod12 хв
Робота з Prisma у Server Actions13 хв
Створення даних через Server Actions11 хв
Оновлення даних через Server Actions12 хв
Видалення даних через Server Actions12 хв
Керування станом дії через useActionState11 хв
Стани завантаження під час мутацій9 хв
Обробка помилок у Server Actions13 хв
Оптимістичний інтерфейс для мутацій13 хв
Хук useOptimistic13 хв
Revalidation після мутації10 хв
Безпека Server Actions17 хв
Server Actions проти API Routes14 хв

API та Backend у Next.js

Route Handlers у Next.js9 хв
HTTP-методи в Route Handlers13 хв
Request та Response в API11 хв
Формування відповідей через NextResponse11 хв
Dynamic Route Handlers10 хв
Query Parameters в API12 хв
Headers та Cookies13 хв
Обробка помилок API16 хв
Валідація API через Zod13 хв
Authentication API14 хв
File Upload API12 хв
Webhooks у Next.js18 хв
CORS для Route Handlers12 хв
API проти Server Actions21 хв
Коли використовувати Route Handler17 хв

Authentication та Authorization

Authentication vs Authorization10 хв
Cookies та Sessions14 хв
Authentication Architecture у Next.js15 хв
Auth.js10 хв
Login та Registration17 хв
Password Hashing13 хв
Session Management16 хв
Protected Routes15 хв
Middleware / Proxy для перевірки доступу9 хв
Authorization на Server Components15 хв
Authorization у Server Actions15 хв
Role-Based Access Control14 хв
Permissions17 хв
OAuth та Social Login11 хв
Security Best Practices19 хв
Типові помилки Authentication23 хв

SEO, Metadata та Content

SEO у Next.js: роль фреймворку та пошукова видимість14 хв
Metadata API у Next.js14 хв
Static Metadata: статичні метадані сторінок12 хв
generateMetadata: програмне формування метаданих16 хв
Dynamic Metadata: динамічні метадані13 хв
Open Graph у Next.js15 хв
Twitter Cards: картки посилань для соцмереж14 хв
Canonical URLs: канонічні адреси сторінок10 хв
robots.txt: керування доступом пошукових роботів9 хв
sitemap.xml: карта сайту для індексації10 хв
Dynamic Sitemap: динамічна карта сайту14 хв
Structured Data та JSON-LD11 хв
Breadcrumbs: навігаційні ланцюжки та SEO12 хв
SEO для Dynamic Routes16 хв
SEO для статей та навчальних сторінок19 хв
Pagination та SEO19 хв
Internal Linking: внутрішня перелінковка15 хв
SEO та Server Components13 хв
Core Web Vitals у Next.js25 хв
SEO Checklist для Next.js24 хв

Images, Fonts та Performance

Компонент next/image11 хв
Оптимізація зображень11 хв
Адаптивні зображення11 хв
Розміри та формати зображень12 хв
Пріоритетне та відкладене завантаження зображень10 хв
Підключення шрифтів через next/font11 хв
Оптимізація шрифтів13 хв
Компонент next/script10 хв
Оптимізація скриптів13 хв
JavaScript-бандл застосунку13 хв
Поділ коду11 хв
Динамічні імпорти11 хв
Динамічні компоненти через next/dynamic12 хв
Серверний і клієнтський бандли15 хв
Аналіз бандла11 хв
Аудит у Lighthouse15 хв
Метрики Core Web Vitals10 хв
LCP, CLS та INP19 хв
Комплексна оптимізація продуктивності20 хв
Чекліст продуктивності для production20 хв

Advanced Next.js

Edge Runtime і Node.js Runtime14 хв
Конфігурація Runtime13 хв
Змінні середовища10 хв
Контекст запиту12 хв
Cookies17 хв
Headers14 хв
Middleware / Proxy13 хв
instrumentation.ts9 хв
OpenTelemetry15 хв
Моніторинг помилок17 хв
Інтернаціоналізація12 хв
Маршрутизація кількома мовами13 хв
generateStaticParams10 хв
Статична генерація13 хв
Динамічний рендеринг12 хв
Incremental Static Regeneration21 хв
Partial Prerendering / Cache Components14 хв
Streaming14 хв
Parallel Routes12 хв
Intercepting Routes15 хв

Production Next.js

Production Build: підготовка застосунку9 хв
next build та next start8 хв
Змінні середовища11 хв
Production-конфігурація Next.js14 хв
Docker + Next.js10 хв
Розгортання Next.js на VPS12 хв
Розгортання Next.js на Vercel12 хв
Reverse Proxy та Nginx13 хв
База даних у production11 хв
Міграції бази даних17 хв
Логування в production17 хв
Моніторинг застосунку14 хв
Відстеження помилок16 хв
Заголовки безпеки15 хв
Rate Limiting у Next.js17 хв
Кешування в production19 хв
Моніторинг продуктивності18 хв
CI/CD для Next.js15 хв
Production Checklist16 хв
Типові проблеми після deployment14 хв

Пов'язані технології