Урок 1. Вступ до Next.js: для чого він потрібен бізнесу: • Чому саме Next.js? Коротка історія та місце фреймворка у сучасній веб-розробці. • Переваги для маркетингу і SEO: швидший час завантаження сторінок, краща індексація у пошукових системах, вищі позиції у видачі. • Успішні кейси застосування Next.js (корпоративні сайти, e-commerce, блог-платформи тощо).
**Урок 2. Налаштування середовища розробки та перший Next.js-проєкт: • Розгортання нового Next.js застосунку. • Огляд структури типового проєкту;
Урок 3. Базова маршрутизація: • Файлова маршрутизація (Pages Router) – маршрути створюються на основі файлів у pages/. • Директорна маршрутизація (App Router) – маршрути формуються за структурою папок у app/. • Розробка базових сторінок та реалізація клієнтської навігації
Урок 4. Механізми рендерингу: • Відмінності між клієнтським рендерингом (SPA), серверним рендерингом (SSR) та статичною генерацією (SSG). • Переваги SSR/ISR/SSG: покращена продуктивність, оптимізація ресурсів фронтенду, швидке перше завантаження, позитивний вплив на Core Web Vitals • Вибір між SSR , ISR та SSG: залежно від характеру контенту (динамічний або статичний) та бізнес-завдань
Урок 5. Перший погляд на отримання даних у Next.js: • Моделі завантаження даних: порівняння getStaticProps і getServerSideProps, їх призначення та оптимальні сценарії використання. • Практична імплементація: завантаження даних із зовнішнього API, застосування в реальних кейсах. • Різниця між статичною генерацією на етапі білду та динамічним рендерингом на сервері, їхній вплив на швидкість завантаження сторінки
Урок 6. SEO-оптимізація у Next.js: ключові підходи: • Мета-теги Open Graph та структуровані дані. • Серверний рендеринг і його вплив на SEO. • Оцінка продуктивності та Core Web Vitals. Обхід помилок та діагностика
Урок 1. Професійна робота з маршрутизацією в Next.js • Порівняння з Pages Router: основні зміни та переваги, гнучкість нової системи. • Динамічні, паралельні та вкладені маршрути, передача параметрів у динамічних маршрутах. Групування маршрутів. • Обробка рендерингу, помилок і middleware у маршрутизації: умовний рендеринг, управління помилками (error.tsx), використання middleware.ts для фільтрації, редиректів та авторизації. • Конфігурування маршрутів і редиректи через next.config.js: налаштування redirects, rewrites, headers для керування трафіком і SEO.
Урок 2. Оптимізація prefetching у маршрутизації • Prefetching у next/link та його вплив на продуктивність. • Lazy Loading та Suspense у Server Components – як уникнути непотрібного завантаження даних.
Урок 3. Поглиблена робота з даними: getStaticProps, getServerSideProps, getStaticPaths • Статична генерація на етапі зборки (build) для сторінок з фіксованими або відносно рідко оновлюваними даними. • Динамічне отримання даних під час кожного запиту (актуально для змісту, що постійно змінюється). • Як створювати динамічні сторінки (наприклад, для каталогу товарів), коли кількість елементів зростає.
Урок 4. Incremental Static Regeneration (ISR) • Як комбінувати переваги SSG (швидкість і кешування) з можливістю “регулярно оновлювати” контент без повного перевипуску сайту. • Бізнес-користь: миттєва публікація нових продуктів, статей, оголошень тощо, без надмірного навантаження на сервер.
Урок 5. API Routes у Next.js • Створення власних серверних ендпоінтів (/pages/api/*) для обробки запитів без потреби піднімати окремий бекенд. • Коли використовувати API Routes, а коли краще працювати через Server Actions ?
Урок 6. Оптимізація кешування та продуктивності • Кешування даних у Server Components • Керування кешем через revalidateTag() та revalidatePath() – сучасний підхід до ISR. • Edge Middleware + кешування: як кешувати динамічний контент на рівні CDN. • Prefetching у next/link – як зменшити зайві завантаження. • Lazy Loading та Suspense у Server Components – як уникнути непотрібного завантаження даних. • Оптимізація зображень у Next.js (next/image).
Урок 1. Глибоке розуміння Server Actions • Коли використовувати Server Actions, а коли API Routes? • Використання use server та інтеграція серверних екшенів у компоненти. • Використання use server та інтеграція серверних екшенів у компоненти. • Обробка помилок у Server Actions. • Відправка форми, реєстрація користувача • Методи кешування запитів у Server Actions: revalidateTag, revalidatePath, кешування fetch().
Урок 2. Аутентифікація та авторизація • Методи автентифікації: OAuth, JWT, session-based. • Огляд NextAuth та інших бібліотек, які спрощують реалізацію логіну та реєстрації, та кастомних підходів разом із Supabase-автентифікацією. • Створення захищених сторінок та доступу до контенту. RBAC (Role-Based Access Control) та ABAC (Attribute-Based Access Control).
Урок 3. Поглиблене керування станом та GraphQL • Огляд способів керування даними у Next.js: Redux / React Context / React Query. • GraphQL-інтеграція. Налаштування клієнта (Apollo/urql) у Next.js з App Router та Server Components: розміщення провайдера, підключення у Client Components. • GraphQL-інтеграція. Налаштування клієнта. Приклади використання queries, mutations і кешування даних на клієнті. • Оптимізація кешування GraphQL через TanStack Query.
Урок 4. Робота з базами даних, інтеграція Supabase • Базові CRUD-операції через Supabase: зчитування даних, створення, оновлення, видалення.
Урок 5. Логування та базове моніторинг-рішення • Збір логів на рівні серверних екшенів: де і як зберігати інформацію про помилки / критичні події.
Урок 1. Налаштування i18n у Next.js. • Порівняння підходів: App Router vs Pages Router у контексті інтернаціоналізації. • Додавання мовних локалей у next.config.js. • Автоматичне визначення мови користувача (navigator.language, Accept-Language).
Урок 2. Динамічні маршрути для багатомовності App Router: • Використання generateStaticParams для динамічного створення локалізованих сторінок. • Структура /[locale]/page.tsx для кожної мови. • Використання next-intl для локалізації контенту у Server Components.
Урок 3. Pages Router: • Реалізація багатомовних сторінок через getStaticProps та getServerSideProps. • Використання next/router для зміни мови та отримання параметрів локалізації. • Структура pages/[locale]/index.tsx для підтримки багатомовності.
Урок 4. Динамічні переклади та робота з JSON-файлами • Використання locales/en.json, locales/ua.json для збереження перекладів. • Завантаження перекладів у Server Components (App Router) та Client Components (Pages Router). • Оптимізація динамічного завантаження перекладів через кешування.
Урок 5. Перемикання мов та збереження вибору користувача • Реалізація кнопки перемикання мови, яка оновлює URL без перезавантаження сторінки. • Використання cookies або localStorage для збереження мови користувача. • Автоматичне встановлення мови при першому відвідуванні сайту.
Урок 6. SEO-оптимізація для багатомовних сайтів • Використання hreflang у <head> для кожної локалі. • Динамічні мета-теги (og:title, description, twitter:card) для кожної мови. • Додавання canonical посилань для уникнення дублікатів контенту
Урок 7. Переклади в API Routes та Server Actions
App Router: • Реалізація локалізованих API-відповідей через use server у Server Actions. • Використання revalidateTag() для оновлення кешу локалізованих даних. Pages Router: • Використання Accept-Language у запитах API Routes (pages/api/*). • Локалізація відповідей API на основі заголовків HTTP-запиту.
Урок 1. Hybrid Rendering • Використання ISR для контенту, що оновлюється без повного перегенерування сторінки. • SSR тільки для персоналізованих даних, що мінімізує зайві запити до бази. • Edge Rendering з використанням Middleware і Edge Functions для миттєвого рендерингу прямо з CDN. • Lazy Data Fetching – стратегія завантаження API-даних після відображення сторінки для зменшення часу рендерингу. • Балансування рендерингу між сервером та клієнтом для досягнення оптимального співвідношення продуктивності та навантаження.
Урок 2. Часткова гідратація (Partial Hydration) • Концепція "Мінімум JavaScript на клієнті – максимум продуктивності": як правильно розділяти код. • Використання Server Components для виводу статичних елементів без додаткового JavaScript. • Client Components – застосування лише там, де потрібна взаємодія користувача. • Зменшення кількості інтерактивних компонентів для покращення показників Core Web Vitals. • Оптимізація взаємодії з великими масивами даних для прискорення рендерингу.
Урок 3. Потоковий рендеринг (Streaming Rendering) • Використання React Suspense для потокового рендерингу контенту, що завантажується поступово. • Асинхронне завантаження API-даних без блокування всієї сторінки. • Передача SSR-компонентів у потоковому режимі для зниження часу рендерингу. • Підхід "critical-first" – спочатку рендеримо важливий контент, а другорядні елементи завантажуємо поступово. • Використання React Server Components для ефективного рендерингу складних сторінок із мінімальним впливом на продуктивність.
Урок 4. Комплексна оптимізація рендерингу• • Поєднання Partial Hydration + Streaming + Lazy Loading для створення максимально швидких сторінок. • Використання Edge Functions для покращення продуктивності без навантаження на сервер. • Кешування даних: налаштування Cache-Control, stale-while-revalidate, s-maxage. • Оптимізація взаємодії фронтенду та бекенду для мінімізації запитів до API. • Розбір складних кейсів оптимізації Next.js-проєктів у реальних умовах.
Урок 5. Автоматизація SEO-завдань у Next.js • Генерація Sitemap (sitemap.xml) та robots.txt за допомогою next-sitemap. • Використання alternate для багатомовних сторінок (hreflang). • Визначення canonical URL для унікальних сторінок. • Використання Google Search Console API для автоматичного відстеження індексації.
Урок 6. SEO-оптимізація для JavaScript-контенту • Server Components vs. Client Components: вплив на SEO. • Використання getServerSideProps для динамічного контенту, що індексується Google. • Lazy Hydration для зменшення розміру JS-бандлу.
Урок 7. Навіщо потрібне передзавантаження ресурсів? • Основи передзавантаження ресурсів у браузері. • Чому деякі ресурси блокують рендеринг та як це виправити? • Вплив передзавантаження на First Contentful Paint (FCP) та Largest Contentful Paint (LCP). • Відмінності між prefetch, preload, fetchpriority. • Коли використовувати Preloading vs Lazy Loading.n для зменшення розміру JS-бандлу.
Урок 8. Prefetch та Preload. Критичне завантаження ресурсів • Що таке preload і коли його використовувати? • Як preload впливає на продуктивність та рендеринг? • Оптимізація передзавантаження: • Preload для шрифтів (woff2, woff). • Preload для зображень та відео. • Preload для CSS і критичних JavaScript-скриптів. • Використання preload у next/head. • Аналіз через Chrome DevTools: як перевірити, чи працює preload ефективно?
Урок 1. Поглиблена робота з API Routes • Структурування ендпоінтів у /pages/api/*: окремі файли для CRUD (наприклад, create.js, update.js). • Безпека, авторизація, валідація даних (Joi, Yup) у цих маршрутах. • Обробка файлів, multipart/form-data, приклади підключення сторонніх сервісів (наприклад, хмарне сховище).
Урок 2. GraphQL (Apollo / urql) у Pages Router • Відмінності від App Router: де розміщувати GraphQL-клієнт, як виконувати SSR. • Приклади кешування даних, передача пропсів від getServerSideProps до компонентів. • Складні випадки: SSR + JWT / OAuth авторизація на GraphQL-сервері.
Урок 3. State Management у Pages Router • Використання Redux Toolkit, Zustand, SWR, TanStack Query у “класичному” підході (без Server Components). • Планування глобального стану: коли робити запити на стороні сервера (SSR), а коли на клієнті, щоб уникати надмірного навантаження.
Урок 4. Інтернаціоналізація в Pages Router • Інструменти (наприклад, next-i18next) та конфігурація під Pages Router. • Динамічні URL для кожної мови, getStaticPaths / getServerSideProps з урахуванням локалі. • SEO для мультимовних сторінок: налаштування hreflang, канонічних посилань, метатегів.
Урок 1. Перехід Next.js-застосунку на Static Export • Що таке Static Export у Next.js: переваги, обмеження, особливості. • Як перевести застосунок із SSR на статичний експорт (видалення унікального коду SSR). • Перевірка та тестування функціональності SPA після конвертації.
Урок 2. Деплоймент Next.js-застосунку вручну на AWS S3 та CloudFront • Основи AWS S3: що це таке, принцип роботи, налаштування бакета для статичного сайту. • Огляд AWS CloudFront: створення CDN-дистрибуції для швидкої доставки контенту. • Практичний деплой: завантаження файлів у S3, налаштування CloudFront через AWS Management Console.
Урок 3. Організація коду та підготовка до Infrastructure as Code (IaC) • Переструктуризація репозиторію: створення директорії infrastructure для IaC-коду. • Переміщення Next.js-застосунку у web-app для кращої організації. • Вступ до Infrastructure as Code (IaC): переваги автоматизованого керування ресурсами.
Урок 4. Деплоймент AWS S3 та CloudFront за допомогою AWS CDK • Огляд AWS CDK: що це таке, ключові можливості, відмінності від CloudFormation. • Написання CDK-скриптів для автоматичного створення S3-бакета та CloudFront-дистрибуції. • Автоматизований деплой застосунку через AWS CDK.
Урок 5. Налаштування CI/CD для автоматичного деплойменту • Вступ до GitHub Actions: що це таке і як використовується для автоматизації. • Написання workflow для автоматичного розгортання на AWS. • Інтеграція AWS CDK у GitHub Actions: деплой по push у main.
Урок 6. Обробка навігації в CloudFront для коректної роботи SPA • Проблема перезавантаження сторінки у SPA: чому виникають помилки 404? • Використання Custom Error Responses у AWS CloudFront для правильного маршрутизації. • Налаштування правил редиректу в AWS CDK для забезпечення безперебійної роботи застосунку.