Видеокурс

Next.js: From App Router to Production

уровень 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