Оволодійте Next.js на рівні експерта, що дозволить вам керувати складними проєктами та вести за собою команди, встановлюючи нові технологічні стандарти
У нас навчаються викладачі та ментори з інших IT-шкіл
Опануйте Next.js для інноваційних та ефективних вебзастосунків
Ви отримаєте пояснення і практику роботи з Next.js, а не суху теорію
Зміцніть свої навички з Next.js, що радикально підвищить вашу цінність на ринку
потребуєте досвіду в реалізації проєктів на Next.js та використанні його функцій
швидкий розвиток технологій вимагає постійного оновлення знань та навичок
коли вже відомі основи, але важко перейти до вищого рівня використання технології
виникають проблеми при спробах інтегрувати Next.js у ваші проєкти, потребуєте допомоги
відчуваєте, що ваша поточна продуктивність не відповідає вимогам проєктів, і хочете більше
не вистачає знань та впевненості для ефективного керування командами та навчання менш досвідчених колег
Нова система маршрутизації Next.js з покращеною продуктивністю, спрощеним конфігуруванням і обробкою помилок. Ви навчитесь налаштовувати і використовувати різні типи маршрутів.
Дізнайтесь, коли і як використовувати SSR і SSG в Next.js для оптимальної продуктивності. Ви навчитесь налаштовувати обидва методи рендерингу.
Рендеринг компонентів React на сервері для підвищення продуктивності. Безпечна взаємодія з API через React Server Actions. Налаштування автентифікації за допомогою Next Auth.
Інтеграція Redux Toolkit і Zustand у Next.js для ефективного управління станом застосунків. Навчитесь налаштовувати і використовувати обидві бібліотеки.
Використання TanStack Query та Apollo GraphQL у Next.js для ефективного отримання і оновлення даних. Забезпечують швидку і безпечну роботу з API.
Навчитесь розгортати Next.js застосунки на AWS Amplify, AWS S3 та Vercel для надійного хостингу та масштабування. Виберіть найкращу хмарну платформу для ваших потреб.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan dui quam, id aliquet lacus suscipit et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan dui quam, id aliquet lacus suscipit et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan dui quam, id aliquet lacus suscipit et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan dui quam, id aliquet lacus suscipit et.
Проєкт: Навчальна платформа з курсами з програмування
Стек: App Router, Tailwind, GraphQL, Zustand, автентифікація за допомогою Next Auth, розгортанням на Vercel
• Переваги використання Next.js
• Введення в концепт SSR (серверний рендеринг)
• Розгортання оточення для розробки
• Приклади найпростішого ручного створення SSR
• Різниця між SSR, SSG (статична генерація сайтів) та ISR (інкрементна статична генерація)
• Концепт «Сторінка» та базова маршрутизація в Next.js
• Маршрутизація у App Router
• Декларативна маршрутизація
• Динамічна маршрутизація
• Паралельні маршрути
• Перехоплюючі маршрути
• Редиректи та Middleware для керування запитами
• Динамічний пререндерінг сторінок на сервері
• Перехоплювач cookies на сервері
• Базова модель серверної автентифікації
• Знайомство зі статичною генерацією сайтів
• Процеси ревалідації статичних ресурсів і кешування
• Доступні варіанти конфігурації next.config
• Використання змінних оточення в Next.js
• Розширення вбудованих конфігурацій webpack
• Серверні та клієнтські компоненти в Next.js
• Можливості Turbopack та приклади його використання з Next.js
• GraphQL та переваги його використання
• Знайомство з екосистемою Apollo GraphQL
• Підключення та налаштування Apollo Client
• Взаємодія з Apollo GraphQL в клієнтських та серверних компонентах
• Використання GraphQL-Codegen для автоматичної генерації типів
• Кастомізація потоку даних за допомогою Apollo Link
• Автентифікація в Next.js з використанням Middleware
• Інтеграція з Next Auth для простої автентифікації зі сторонніми сервісами
• Server Actions у React для ефективної обробки запитів на сервері
• Інтеграція з Supabase для створення fullstack-застосунків
• Приклад роботи з серверними екшенами з Next.js та Supabase
• Приклади оптимізації, які нам пропонує React Compiler
• Об’єднання статичного та динамічного рендерингу за допомогою моделі Partial Prerendering
• Інтеграція клієнтського стейт-менедженту за допомогою Zustand
Проєкт: Фітнес-трекер
Стек: Pages Router, TanStack Query, Rest API, CSS Modules, Redux Toolkit, автентифікації з власним сервером, розгортанням на AWS Amplify
• Порівняння Pages Router та App Router
• Особливості маршрутизації в Pages Router
• Серверний рендеринг в Pages Router
• Отримання даних на сервері завдяки методу getServerSideProps
• Попередній рендеринг сторінок на етапі збірки через getStaticProps
• Огляд другого курсового проєкту
• Гнучкі можливості керування кешем завдяки TanStack Query (раніше React Query)
• Приклади використання TanStack Query в Next.js з REST API
• Оптимізація взаємодії з кешованими даними з SWR та приклади його використання
• Використання Redux та Redux Toolkit для ефективного управління станом застосунку
• Redux Toolkit та TypeScript
• Грамотна композиція Next.js-застосунку, який використовує Redux Toolkit
• Приклади використання інтернаціоналізації у Next.js
• Автоматичне визначення мови користувача
• Бібліотеки, які використовується для перекладу
• Налаштування логування для різних середовищ (development i production) та для REST API-запитів
• Використання AWS Amplify для швидкого розгортання Next.js-застосунку
• Розгортання застосунку на Azure Static Web Apps
• Реалізація власної системи деплойменту (аналог Vercel) на основі Docker-контейнерів
• Переваги та приклади використання Static Export у Next.js-застосунках
• Розгортання застосунку створеного за допомогою Static Export на AWS S3 та CloudFront
• Автоматизація процесу створення та оновлення хмарних ресурсів за допомогою AWS CDK та CloudFormation використовуючи підхід Infrastructure as Code
• Налаштування CI/CD pipeline за допомогою GitHub Actions для ефективного автоматизованого управління розгортанням
практики
персональні проєкти, домашні роботи та live-кодинг під час занять
зворотнього зв'язку
перевірка коду, персональні тет-а-тет сесії та чат з наставником, підтримка від курс-менеджера та персонального менеджера
теорії
заняття в прямому ефірі, можливіcть поставити питання викладачу, додаткові матеріали для покращення засвоєння матеріалу
"Next.js є інноваційним інструментом для сучасних розробників, що надає необхідні інструменти для оптимізації застосунків.”
"Next.js – це фреймворк, який спрощує створення складних React-застосунків і допомагає досягти чудової продуктивності.”
"Я рекомендую Next.js як один із найкращих інструментів для створення продуктивних і SEO-дружніх React застосунків.”