- ру
- ук
Продвинутый курс по Next.js v.12:
создание SPA & SSR-приложений
Об интенсиве
Существует множество фреймворков и библиотек, созданных поверх React, чтобы улучшить понимание и ускорить разработку. Один из самых популярных фреймворков — Next.js.
Фреймворк Next.js позволяет рендерить React-приложения на сервере, благодаря этой технологии ваши приложения будут невероятно быстрыми и удобными.
Next.js поможет вам:
- Вывести сайт в топ при ранжировании в поисковых системах.
- Повысить качество отрисовки контента для моментальной загрузке сайта.
- Добиться высокой скорости работы сайта на различных мобильных устройствах.
- Получить высокий PageSpeed (90+).
- Перенести SPA-приложение на SSR, если вы уже начали этот процесс и столкнулись со сложностями.
- Cократить время внедрения Next.js в проект.
- Научиться легко работать с GraphQL в контексте всех технических сложностей SSR.
- Научиться работать с Redux не только на клиенте, но и на SSR-сервере.
- Научиться работать с большими React-приложениями, которые поддерживают работу с локализацией в контексте SSR-технологии.
Ваш результат после обучения:
- Вы готовы создавать полноценные SPA-приложения, которые будут 100% совместимыми со всеми поисковыми системами.
- Вы сможете настраивать с нуля React-приложения с помощью Next.js любой сложности.
- Вы улучшите UX для клиента.
Требования к участникам
- Уверенные знания JS + ES6
- Базовые знания Node.js: cookie, headers, файловая система, относительные и абсолютные пути
- Уверенные знания React: функциональные компоненты, хуки
- Базовые знания любого стейт менеджера Redux/MobX
От экспертов своего дела
Мы успешно провели:
25 потоков по React, 12 по Redux, 4 по webpack, 10 по JavaScript и 5 по Backend. В 2019 году мы запустили новые курсы по Docker и Redis, в 2020 году — GraphQL и TypeScript, а также ввели курсы по вёрстке. В 2021 году — Next.js. Наша школа покрывает полный стек по профессиям Frontend и Fullstack-разработчик.
Программа курса
Неделя 1
+Урок 1. Знакомство с Next.js
Разберёмся с необходимостью использования Next.js, а так же с особенностями настройки React-приложения для SSR.
Подробнее...
- Почему Next.js
- Введение в концепт SSR — Server-Side Rendering или серверный рендеринг
- Особенности SPA в связке с SSR
- Развёртывание окружения для разработки
- Fast Refresh и продвинутый developer-experience (DX)
- Концепт «Страница» и базовый роутинг
- Деплоймент приложения
Практика
- Научимся правильно конфигурировать приложение для SSR
- Создадим стартовую точку для Next.js приложения
+Урок 2. Продвинутый роутинг в Next.js
Углубимся в принципы построения навигации в SSR-приложении. Разберёмся с типами роутинга в Next.js.
Подробнее...
- Декларативный
- Императивный
- Динамический
- Поверхностный
- Редиректы
- Middleware
Практика
- Разберёмся с навигацией в SSR-приложении
- Научимся правильно реализовывать переходы между страницами
Неделя 2
+Урок 3. Продвинутый SSR и SSG
Разберёмся с концепциями генерации страниц для каждого отдельного запроса — SSR и статическими страницами — SSG.
Подробнее...
- Динамический пре-рендеринг страниц на сервере
- Перехватчик cookies на сервере
- Модель серверной аутентификации
- Грамотная композиция Next.js-приложения
- Знакомство с концептом SSG — Server-Side Generated или статический пре-рендеринг
- Сравнение моделей пре-рендеринга: SSR против SSG
- Как использовать Next.js правильно
- Статическая регенерация
- Server-Side Streaming и React Server Components
Практика
- Научимся правильно применять специальные методы Next.js для генерации статических и динамических страниц
+Урок 4. Next.js и TypeScript (видеоурок)
Разберёмся с необходимостью использования TypeScript в Next.js-приложении. Настроим конфигурацию на получение максимального результата от подсказок и проверок.
Подробнее...
- Почему TypeScript
- Почему TypeScript и React/Next.js
- Как использовать TypeScript с React/Next.js правильно
- Переменные окружения
Практика
- Переведём Next.js-приложение на TypeScript
Неделя 3
+Урок 5. Next.js под капотом. Кастомизация
Разберёмся с внутренними компонентами и тем, какие бонусы можно получить кастомизировав эти компоненты.
Подробнее...
- Обзор конфигурационного файла Next.js. SWC-компилятор
- Расширение встроенных конфигураций: webpack и Babel
- Корневые компоненты: App, Document, Head, Main
- Кастомизации загрузки скриптов при помощи NextScript
- Шрифты, иконки и JSON
- Продвинутая оптимизация изображений
- Глобальная и модульная стилизация
- Оптимизация ассетов
- Поддержка современных форматов: WebP и AVIF
Практика
- Создадим кастомные служебные компоненты для расширения функционала приложения
+Урок 6. Интернационализация Next.js
Разберёмся с основными способами добавления поддержки мультиязычности в Next.js приложении.
Подробнее...
- Знакомство с i18n (internationalization)
- Конфигурация локализации
- Интернационализированный роутинг
- Автоматическое определение локали каждого пользователя
- Сохранение предпочитаемого языка пользователя
- Работа с локализацией посредством хуков
- Работа с данными на сервере с учётом локализации
- Сборка приложения с учётом локализации
Практика
- Научимся разрабатывать интернациональные приложения
- Добавим поддержку двух языков в наше приложение
Неделя 4
+Урок 7. Знакомство с GraphQL (видеоурок)
Разберёмся с альтернативным способом получения данных с сервера — GraphQL.
Подробнее...
- Брифинг по GraphQL
- Обзор GraphQL-клиентов
- Знакомство с экосистемой Apollo GraphQL
- Подключение и настройка Apollo Client
- Разбор сильных и слабых сторон Apollo Client
Практика
- Подключим GraphQL к приложению
+Урок 8. Next.js и GraphQL
Разберёмся с особенностями работы с данными на стороне сервера в SSR-приложении.
Подробнее...
- Брифинг по GraphQL и Apollo
- Обзор Apollo GraphQL в Next.js-приложении
- Подключение Apollo Client
- Использование Apollo Client в качестве хранилища глобального состояния
- Создание типизированной экосистемы проекта
Практика
- Реализуем работу с данными при помощи GraphQL
Неделя 5
+Урок 9. Next.js и Redux (видеоурок)
Разберёмся с необходимостью использования стейт менеджера Redux в Next.js приложении.
Подробнее...
- Брифинг по Redux
- Обзор осмысленности Redux в Next.js-приложении
- Знакомство с концептом hydration
- Роль процесса hydration в связке Redux и Next.js
- Грамотная композиция Redux-составляющей приложения
- Redux и TypeScript
Практика
- Подключим Redux к Next.js-приложению
- Настроим работу Redux на стороне сервера и на стороне клиента
+Урок 10. Next.js и MobX state tree
Разберёмся с особенностями использования стейт менеджера MobX в Next.js-приложении.
Подробнее...
- Брифинг по MobX state tree
- Сравнение Redux и MobX в Next.js-приложении
- MobX state tree и Next.js
Практика
- Подключим MobX к Next.js-приложению
- Создадим MobX хранилища при помощи библиотеки MobX state tree
Новый уровень разработки
Без наставника
- 20 часов занятий с записью
- Практические домашние задания с проверкой
- Поддержка во время обучения в чате группы
- Доп. материалы для углубленного изучения
- Исходные коды и презентации
- Поддержка клиент-менеджера
- Доступ к материалам курса 12 мес.
*оплата частями до 5 платежей
С наставником
- Всё, что входит в тариф Без наставника, а также:
- Личная обратная связь от ментора по всем работам
- Персональный чат с ментором
- Неограниченный доступ к материалам курса
- Онлайн-сертификат
*оплата частями до 5 платежей
Оформить участие
Куратор программы
Андрей Присняк
Ведущий разработчик в Лектруме. 7 лет опыта работы с крупными международными outsource- и outstaff-компаниями. 10 лет опыта ИТ-менторства.
Автор курсов по JavaScript, Backend, Docker и Redis.
Ответы на вопросы
- ➕ Какими необходимыми навыками я должен обладать перед началом курса?
- Вы должны уверенно владеть базовым JavaScript и ES6+. Так же вам потребуются базовые навыки работы с Node.js, такие как понимание работы с файловой системой, абсолютные и относительные пути. Не лишним будет общее представление о HTTP-заголовках и о том что из себя представляют cookie и для чего они предназначены. Из React вам потребуются навыки работы с функциональными компонентами и понимание хуков useState и useEffect. В добавок необходимо понимание принципов работы любого из стейт-менеджеров — Redux или MobX.
- ➕ Какая информация будет содержаться в сертификате?
- Онлайн-сертификат будет с оценкой.
- ➕ Я очень хорошо знаю Next.js и хочу быть у вас ментором.
- Да, это возможно. Мы с радостью с тобой будем сотрудничать, если у тебя 3+ года опыта в коммерческой разработке с инструментами данного курса, ты успешно прошёл наш тест и интервью c техническим руководителем курса. Напиши нам в чат-бот и получили ссылку на тест. Желаем удачи.
- ➕ Могу ли я перейти на более продвинутый тариф, если уже оплатил курс?
- Да, для этого нужно обратиться к нам в чат-бот и мы пришлём вам счет на доплату.
- ➕ Чем вы лучше других обучающих компаний?
- Во-первых, у нас большая экспертиза в образовании, во-вторых, мы очень фанатично относимся к качеству курса и менторской поддержки, а в третьих, мы не просто учим, а ежедневно пишем на том стеке, которому обучаем. Мы практики, теоретики, а еще идеалисты.
- ➕ Какой уровень скиллов у ваших экспертов?
Мы понимаем, какую важную функцию выполняет наставник в обучении и поэтому с нами сотрудничают преподаватели не ниже Senior-уровня и менторы не ниже Middle-уровня, которые во время обучения делятся своим опытом, лучшими практиками со студентами.