Відеокурс

Next.js: від App Router до продакшену

рівень intermediate

Курс проведе від створення проєкту до продакшену: роутинг, дані, auth, Prisma, форми й деплой на Vercel — щоб закривати комерційні задачі на Next.js.

Курс охоплює основи Next.js і App Router: SSR, SSG і CSR, create-next-app, file-based routing, nested і catch-all routes, layouts. Далі — Server Components і Client Components, fetch на сервері, dynamic routes, Loading UI і streaming, error / not-found, кешування та revalidation. Окремо: Route Handlers, Server Actions, Prisma і CRUD, форми з React Hook Form, middleware, authentication (sessions, JWT, cookies), Image, next/font, Core Web Vitals, Metadata API, Open Graph, sitemap і robots. У просунутій частині — useActionState і useFormStatus, архітектура великих сторінок, Edge Runtime, деплой на Vercel, Zustand і TanStack Query.


Після курсу ви зможете збирати full-stack застосунки на Next.js, розділяти серверний і клієнтський код, підключати БД, закривати auth і SEO та деплоїти на Vercel. Це рівень Frontend / Junior+ Fullstack, який системно використовує App Router, а не збирає SPA «як на React Router

-25%2 700 ₴
2 025 ₴
12
12
24
12
12
12
7 годин відео
25 занять
25 тестів
14 практичних завдань
мова курсу українська
Твій AI-асистент
  • Олексій Дом'янич
    Олексій Дом'янич Senior Software Engineer

Вивчається на курсі

Основи Next.js • 4 заняття

  • 1

    Що таке Next.js і навіщо він потрібний

    Безкоштовно
    • Відео9 хв • дивитись відео
    • Тест
  • 2

    Створення першого Next.js проєкту та структура проєкту

    Безкоштовно
    • Відео20 хв • дивитись відео
    • Конспект
    • Тест
  • 3

    File-based Routing у Next.js: як папки перетворюються на URL

    Безкоштовно
    • Відео12 хв • дивитись відео
    • Конспект
    • Тест
    • Практика
  • 4

    Layouts у Next.js

    • Відео10 хв • дивитись відео
    • Конспект
    • Тест
    • Практика

App Router та React Server Components • 5 занять

  • 5

    Server Components vs Client Components

    • Відео11 хв • дивитись відео
    • Конспект
    • Тест
  • 6

    Отримання даних у Next.js за допомогою fetch()

    • Відео10 хв • дивитись відео
    • Конспект
    • Тест
    • Практика
  • 7

    Динамічні маршрути в Next.js

    • Відео12 хв • дивитись відео
    • Конспект
    • Тест
    • Практика
  • 8

    Loading UI, Streaming, Error та Not Found

    • Відео18 хв • дивитись відео
    • Конспект
    • Тест
    • Практика
  • 9

    Кешування даних та Revalidation у Next.js

    • Відео15 хв • дивитись відео
    • Конспект
    • Тест

Робота з даними • 4 заняття

  • 10

    API Routes та Route Handlers у Next.js

    • Відео11 хв • дивитись відео
    • Конспект
    • Тест
    • Практика
  • 11

    Server actions

    • Відео20 хв • дивитись відео
    • Конспект
    • Тест
  • 12

    Робота з базою даних (Prisma + Next.js)

    • Відео21 хв • дивитись відео
    • Конспект
    • Тест
    • Практика
  • 13

    Forms в Next.js (React Hook Form + Validation)

    • Відео18 хв • дивитись відео
    • Конспект
    • Тест
    • Практика

Production-фічі • 5 занять

  • 14

    Middleware у Next.js

    • Відео11 хв • дивитись відео
    • Конспект
    • Тест
    • Практика
  • 15

    Authentication у Next.js

    • Відео21 хв • дивитись відео
    • Конспект
    • Тест
    • Практика
  • 16

    Image Optimization у Next.js

    • Відео11 хв • дивитись відео
    • Конспект
    • Тест
  • 17

    Fonts та Performance у Next.js

    • Відео18 хв • дивитись відео
    • Конспект
    • Тест
  • 18

    SEO в Next.js

    • Відео18 хв • дивитись відео
    • Конспект
    • Тест
    • Практика

Просунутий Next.js • 3 заняття

  • 19

    Професійна робота із Server Actions та UX форм

    • Відео17 хв • дивитись відео
    • Конспект
    • Тест
  • 20

    Архітектура великих сторінок

    • Відео23 хв • дивитись відео
    • Конспект
    • Тест
  • 21

    Edge Runtime у Next.js

    • Відео10 хв • дивитись відео
    • Конспект
    • Тест
    • Практика

Реальний продакшен • 4 заняття

  • 22

    Deploy Next.js застосунку на Vercel

    • Відео33 хв • дивитись відео
    • Конспект
    • Тест
  • 23

    Архітектура великого Next.js проєкту

    • Відео27 хв • дивитись відео
    • Конспект
    • Тест
    • Практика
  • 24

    State Management у Next.js

    • Відео23 хв • дивитись відео
    • Конспект
    • Тест
    • Практика
  • 25

    TanStack Query у Next.js: коли він потрібен, а коли ні

    • Відео31 хв • дивитись відео
    • Конспект
    • Тест
Доступ до розумного AI-помічника, який вміє:
  • Пояснювати складне та миттєво давати відповіді на питання щодо курсу чи уроку.
  • Бути ментором та допомагати зрозуміти логіку розв’язання: для цього ставлю цікаві доречні запитання.
  • За кілька секунд знаходити потрібні уроки й матеріали курсу разом із відповіддю.
  • Розуміти тебе з полуслова та відповідати на голосові запитання так само швидко, як і на текстові.
  • Бонус: перші 50 зірочок на користування помічником вже включено!

Після проходження курсу ви отримаєте сертифікат

-25%2 700 ₴
2 025 ₴
12
12
24
12
12
12

Можеш спробувати курс, перш ніж платити

Кожен урок у Hillel Max — це чіткий і простий план. Зручний та зрозумілий шлях до знань. Спочатку ти дивишся коротке відео, потім працюєш з прикладами та теорією, робочими матеріалами. Щоб закріпити знання, ти проходиш тест чи виконуєш практичне завдання. І на фінал — можеш перевірити себе та засвоєне, переглянувши готовий відеорозбір цієї практики від наших експертів.

Дивись відеоуроки, коли зручно

Навчайся у своєму темпі — без тиску й дедлайнів. Перемотуй, зупиняй, повертайся до складних тем або пропускай уже знайомі та вибирай саме ту тему, яка тобі потрібна тут і зараз.

Май міцну теорію під рукою

Чіткі та зрозумілі пояснення допоможуть систематизувати знання. Кожну тему ми розбили на зручні блоки з прикладами та ключовими моментами для кращого засвоєння.

Практикуйся на реальних задачах та тестах

Практичні задачі й кейси максимально наближені до актуальних робочих ситуацій. Зможеш прокачати навички, які знадобляться під час співбесід і в повсякденній роботі

Обрати курс
Можливостей
Навчання
Знань
Практики
Можливостей
Навчання
Знань
Практики
Bonuses block background image

Отримай бонуси
за навчання

Отримай XP за навчання
Виконуй щоденні завдання
Закривай тижневі відрізки
Збирай нагороди
Качай рівень
Отримуй бонуси, на які можна купити наступний курс
Gift