Circle
Живий онлайн-курс

Next.js v15: розробка просунутих SPA та SSR-застосунків

Оволодійте Next.js на рівні експерта, що дозволить вам керувати складними проєктами та вести за собою команди, встановлюючи нові технологічні стандарти

10 березня
Star
10 березня
Star
10 березня
Star
10 березня
Star
10 березня
Star
10 березня
Star
10 березня
Star
10 березня
Star
10 березня
Star
10 березня
Star
10 березня
Star
10 березня
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Живий онлайн-курс
Star
Svg

Перший в Україні курс на тему Next.js, який стартував 25 грудня 2021 року

Експертне навчання

У нас навчаються викладачі та ментори з інших IT-шкіл

Нове покоління

Опануйте Next.js для інноваційних та ефективних вебзастосунків

Пояснення та навички

Ви отримаєте пояснення і практику роботи з Next.js, а не суху теорію

Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Circle
Опис курсу

Практичний онлайн-курс

Зміцніть свої навички з Next.js, що радикально підвищить вашу цінність на ринку

Icon
Дата: 10 березня
Icon
Тривалість: 6 тижнів
Icon
Наповнення: 12 модулів
Icon
Практика: 2 проєкти

Цей курс буде корисним, якщо ви

Цей курс буде корисним, якщо ви

1
не маєте певних навичок

потребуєте досвіду в реалізації проєктів на Next.js та використанні його функцій

2
знаходитесь в актуалізації знань

швидкий розвиток технологій вимагає постійного оновлення знань та навичок

3
досягнули плато в навчанні

коли вже відомі основи, але важко перейти до вищого рівня використання технології

Цей курс буде корисним, якщо ви

4
маєте труднощі щодо інтеграції

виникають проблеми при спробах інтегрувати Next.js у ваші проєкти, потребуєте допомоги

5
бажаєте покращити продуктивність

відчуваєте, що ваша поточна продуктивність не відповідає вимогам проєктів, і хочете більше

6
потребуєте в навичках керівництва

не вистачає знань та впевненості для ефективного керування командами та навчання менш досвідчених колег

Фішки курсу

1
App Router в деталях

Нова система маршрутизації Next.js з покращеною продуктивністю, спрощеним конфігуруванням і обробкою помилок. Ви навчитесь налаштовувати і використовувати різні типи маршрутів.

2
Server-Side Rendering
Static Site Generation

Дізнайтесь, коли і як використовувати SSR і SSG в Next.js для оптимальної продуктивності. Ви навчитесь налаштовувати обидва методи рендерингу.

3
React Server Components  
React Server Actions
Next Auth

Рендеринг компонентів React на сервері для підвищення продуктивності. Безпечна взаємодія з API через React Server Actions. Налаштування автентифікації за допомогою Next Auth.

4
Redux Toolkit та Zustand

Інтеграція Redux Toolkit і Zustand у Next.js для ефективного управління станом застосунків. Навчитесь налаштовувати і використовувати обидві бібліотеки.

5
TanStack Query та Apollo GraphQL

Використання TanStack Query та Apollo GraphQL у Next.js для ефективного отримання і оновлення даних. Забезпечують швидку і безпечну роботу з API.

6
AWS Amplify, AWS S3, Vercel

Навчитесь розгортати Next.js застосунки на AWS Amplify, AWS S3 та Vercel для надійного хостингу та масштабування. Виберіть найкращу хмарну платформу для ваших потреб.

1
Generative design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan dui quam, id aliquet lacus suscipit et.

2
AI-powered content creation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan dui quam, id aliquet lacus suscipit et.

3
Monitoring and optimization

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan dui quam, id aliquet lacus suscipit et.

4
Predictive design analytics

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan dui quam, id aliquet lacus suscipit et.

Cone
Викладач

Антон Худяков

Software Development Engineer в IT-компанії, що входить у ТОП-5 зі списку Big Tech
7+ років досвіду розробки вебзастосунків для e-commerce, інструментів бізнес-аналітики, SSG, ML та рішень MLOps
Керівник курсу та викладач в LECTRUM
Значний практичний досвід з Angular, React, AWS, Node.js та Python
Двічі ментор проєктів-переможців в TechGround Hackathons
Магістр Інституту прикладного системного аналiзу КПІ ім. Ігоря Сікорського
Аспірант Інституту кібернетики ім. В. М. Глушкова Національної академії наук України
Результати

Ви навчитеся

Переносити ЅPA-застосунки на SSR будь-якої складності

Розгортати застосунки на Vercel, AWS та Azure за допомогою managed сервісів та власних рішень на основі Docker

Працювати з локалізацією в контексті SSR-технології

Легко працювати з GraphQL у контексті технічних складнощів ЅЅR

Отримувати високий PageSpeed (95+) для своїх ЅЅR-проєктів

Працювати з App Router та Pages Router та детально розберетеся з обома підходами

Svg Image

Програма навчання

Етап 1. Інтерактивна розробка першого проєкту «Курсус»
Substrack Icon

Проєкт: Навчальна платформа з курсами з програмування

Стек: App Router, Tailwind, GraphQL, Zustand, автентифікація за допомогою Next Auth, розгортанням на Vercel

01. Знайомство з Next.js та Server-side Rendering
Substrack Icon

• Переваги використання Next.js
• Введення в концепт SSR (серверний рендеринг)
• Розгортання оточення для розробки
• Приклади найпростішого ручного створення SSR
• Різниця між SSR, SSG (статична генерація сайтів) та ISR (інкрементна статична генерація)
• Концепт «Сторінка» та базова маршрутизація в Next.js

02. Просунута маршрутизація у Next.js
Plus Icon

• Маршрутизація у App Router
• Декларативна маршрутизація
• Динамічна маршрутизація
• Паралельні маршрути
• Перехоплюючі маршрути
• Редиректи та Middleware для керування запитами

03. Просунуті SSR та SSG
Plus Icon

• Динамічний пререндерінг сторінок на сервері
• Перехоплювач cookies на сервері
• Базова модель серверної автентифікації
• Знайомство зі статичною генерацією сайтів
• Процеси ревалідації статичних ресурсів і кешування
• Доступні варіанти конфігурації next.config
• Використання змінних оточення в Next.js

04. Клієнтські та серверні компоненти, Turbopack
Plus Icon

• Розширення вбудованих конфігурацій webpack
• Серверні та клієнтські компоненти в Next.js
• Можливості Turbopack та приклади його використання з Next.js

05. Інтеграція GraphQL у проєкти на базі Next.js
Plus Icon

• GraphQL та переваги його використання
• Знайомство з екосистемою Apollo GraphQL
• Підключення та налаштування Apollo Client
• Взаємодія з Apollo GraphQL в клієнтських та серверних компонентах
• Використання GraphQL-Codegen для автоматичної генерації типів
• Кастомізація потоку даних за допомогою Apollo Link

06. Автентифікація, робота з серверними екшенами та Supabase
Plus Icon

• Автентифікація в Next.js з використанням Middleware
• Інтеграція з Next Auth для простої автентифікації зі сторонніми сервісами
• Server Actions у React для ефективної обробки запитів на сервері
• Інтеграція з Supabase для створення fullstack-застосунків
• Приклад роботи з серверними екшенами з Next.js та Supabase

07. React Compiler, Partial Prerendering та інтеграція зі Zustand
Plus Icon

• Приклади оптимізації, які нам пропонує React Compiler
• Об’єднання статичного та динамічного рендерингу за допомогою моделі Partial Prerendering
• Інтеграція клієнтського стейт-менедженту за допомогою Zustand

Етап 2. Інтерактивна розробка другого проєкту «Руханка»
Plus Icon

Проєкт: Фітнес-трекер

Стек: Pages Router, TanStack Query, Rest API, CSS Modules, Redux Toolkit, автентифікації з власним сервером, розгортанням на AWS Amplify

08. Pages Router в деталях
Plus Icon

• Порівняння Pages Router та App Router
• Особливості маршрутизації в Pages Router
• Серверний рендеринг в Pages Router
• Отримання даних на сервері завдяки методу getServerSideProps
• Попередній рендеринг сторінок на етапі збірки через getStaticProps
• Огляд другого курсового проєкту

09. Redux Toolkit, оптимізація запитів та керування кешем за допомогою TanStack Query та SWR
Plus Icon

• Гнучкі можливості керування кешем завдяки TanStack Query (раніше React Query)
• Приклади використання TanStack Query в Next.js з REST API
• Оптимізація взаємодії з кешованими даними з SWR та приклади його використання
• Використання Redux та Redux Toolkit для ефективного управління станом застосунку
• Redux Toolkit та TypeScript
• Грамотна композиція Next.js-застосунку, який використовує Redux Toolkit

10. Інтернаціоналізація та логування
Plus Icon

• Приклади використання інтернаціоналізації у Next.js
• Автоматичне визначення мови користувача
• Бібліотеки, які використовується для перекладу
• Налаштування логування для різних середовищ (development i production) та для REST API-запитів

11. Розгортання Next.js-застосунків на популярних хмарних платформах та розробка власної системи
Plus Icon

• Використання AWS Amplify для швидкого розгортання Next.js-застосунку
• Розгортання застосунку на Azure Static Web Apps
• Реалізація власної системи деплойменту (аналог Vercel) на основі Docker-контейнерів

12. Static Export та розгортання на AWS S3 та CloudFront як SPA. Infrastructure as Code за допомогою AWS CloudFormation та CDK
Plus Icon

• Переваги та приклади використання Static Export у Next.js-застосунках
• Розгортання застосунку створеного за допомогою Static Export на AWS S3 та CloudFront
• Автоматизація процесу створення та оновлення хмарних ресурсів за допомогою AWS CDK та CloudFormation використовуючи підхід Infrastructure as Code
• Налаштування CI/CD pipeline за допомогою GitHub Actions для ефективного автоматизованого управління розгортанням

Бонусна тема: OpenNext

Як ми навчаємо

75%

практики

персональні проєкти, домашні роботи та live-кодинг під час занять

20%

зворотнього зв'язку

перевірка коду, персональні сесії та чат з наставником, підтримка від курс-менеджера та персонального менеджера

5%

теорії

заняття в прямому ефірі, можливіcть поставити питання викладачу, додаткові матеріали для покращення засвоєння матеріалу

Особистий кабінет у навчальній платформі
Підтримка курс-менеджера та досвідчених менторів
Персональний підхід під час навчання до кожного студента
На занятті можна спілкуватися з викладачем
У групі до 20 студентів для комфортного навчання
Заняття проходять двічі на тиждень о 20:00
Перевірте свої знання
Line Svg

Маєте сумніви, що потягнетє цей курс?

Лідери думок про Next.js

«Next.js є інноваційним інструментом для сучасних розробників, що надає необхідні інструменти для оптимізації застосунків.»

Lee Robinson
Директор по розробці в Vercel, залучений у розвиток Next.js

«Next.js — це фреймворк, який спрощує створення складних React-застосунків і допомагає досягти чудової продуктивності.»

Dan Abramov
Співавтор Redux і Create React App

«Я рекомендую Next.js як один із найкращих інструментів для створення продуктивних і SEO-дружніх React-застосунків.»

Kent C. Dodds
Автор Testing Library і популярний викладач

Наші випускники задоволені результатом

StarStarStarStarStar

«Викладачі/ментори круті та дуже компетентні, процес був надзвичайно цікавим. Практичні завдання допомогли мені зрозуміти матеріал...»

Андрій Матенка
Senior Frontend
StarStarStarStarStar

«Пройшов курс по Next.js, залишився дуже задоволений подачею на уроках, та окрема подяка ментору, якісно допомогав на протязі курсу.»

Макар Довгополий
Frontend Developer
StarStarStarStarStar

«Однозначно рекомендую! Лектор пояснює дуже круті кейси саме з досвіду. Відповідає на будь-які запитання.»

Роман Овчаренко
Frontend Developer
StarStarStarStarStar

"З впевненістю можу рекомендувати курси, матеріал поданий порційно, ментор та курс-менеджер постійно на зв'язку, інформація актуальна."

Костя Столярський
Fullstack developer
StarStarStarStarStar

"Добре підібрана програма, ментор та курс менеджер завжди відповідали допомагали всім необхідним для хорошого засвоєння матеріалу."

Максим Ярмолюк
Frontend Developer
StarStarStarStarStar

"Лектор та ментор допомагали з реальними робочими кейсами, постійно тримали під контролем процес і сприяли ефективному навчанню."

Людмила Литвинова
Frontend Developer
StarStarStarStarStar

"Лектор доступно і цікаво подає інформацію на прикладах з реальних проектів. Круто, що задіяли багато додаткових тем, таких як graphql, aws, state."

Микита Лалетин
Frontend Developer
StarStarStarStarStar

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan dui quam, id aliquet lacus suscipit et proin vestibulum."

User Image
Tina Gimson
Designer
StarStarStarStarStar

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan dui quam, id aliquet lacus suscipit et proin vestibulum."

User Image
Samanta Willaian
Home Cleaning
Line Svg
Хочу на курс

Ми зв’яжемося з вами та уточнимо, наскільки курс відповідає вашому запиту, а також відповімо на ваші питання

Натискаючи кнопку «написати нам», ви погоджуєтеся з умовами договору-оферти