Продвинутый курс по Next.js:
Продвинутый курс по Next.js:
создание 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 для клиента.
Требования к участникам
- JavaScript и ECMAScript 2015
- Понимание на базовом уровне React.js
От экспертов своего дела
Мы успешно провели:
19 потоков по React, 12 по Redux, 4 по webpack, а также обучили 5 потоков по JavaScript и 3 по Backend. В 2019 году мы запустили новые курсы по Docker и Redis, а в 2020 году — GraphQL и TypeScript.
Структура курса
Неделя 1
+Базовая настройка React-приложения с помощью Next.js
Разберёмся с особенностями настройки React-приложения для SSR.
Подробнее...
Базовая настройка React-приложения
- Введение в SSR-приложения
- Особенности SPA & SSR-приложений
- Введение в Next.js
- Базовая настройка Next.js для классического React SPA-приложения
- Разбор самых популярных ошибок при работе с Next.js
Практика
- Научимся правильно конфигурировать приложение для SSR
+Продвинутый роутинг в Next.js
Углубимся в принципы построения навигации в SSR-приложении.
Подробнее...
Продвинутый роутинг
- Работа с динамическими страницами
- Навигация с помощью Link
- Роутинг с помощью хуков
Практика
- Разберёмся с навигацией в SSR-приложении
Неделя 2
+Работа с REST & GraphQL данными на сервере
Разберёмся с особенностями работы с данными на стороне сервера в SSR-приложении
Подробнее...
Работа с данными на сервере
- Работа с getStaticProps
- Работа с getStaticPaths
- Работа с getServerSideProps
Практика
- Научимся работать с данными получаемыми при помощи REST и GraphQL
+Создание REST API c помощью Next.js
Разберёмся с тем как создавать REST API в Next.js-приложениях
Подробнее...
REST API в Next.js
- Работа с динамическими роутами
- Безграничные возможности c API Middlewares
- Управление ответом с помощью Response Helpers
Практика
- Научимся создавать REST API в Next.js-приложениях
Неделя 3
+Продвинутая оптимизация React-приложений
Разберёмся со специальными структурами данных — множествами и ассоциативными массивами.
Подробнее...
Продвинутая оптимизация
- Расширение возможностей Next.js с помощью Webpack
- Продвинутая оптимизация CSS
- Оптимизация изображений с помощью next/image
- Правильное подключение шрифтов
- Разбор популярных ошибок при доставке JS-скриптов в SSR-приложениях
- Ускорение на 70% отрисовки контента для старых устройств
Практика
- Разберёмся с оптимизацией React приложений для достижения максимальной производительности
+Deployment SSR-приложения
Разберёмся с особенностями сборки и развёртывания SSR-приложения
Подробнее...
Deployment
- Сборка приложения для запуска в Docker-контейнере
- Запуск приложения в облаке
- Сборка приложения для запуска с помощью Nginx
Практика
- Научимся правильно собирать и упаковывать в Docker-контейнер Next.js приложение
Неделя 4
+Локализация Next.js-приложения
Разберёмся с основными способами добавления поддержки мультиязычности в Next.js приложении
Подробнее...
Тип данных symbol и well-known символы
- Базовая конфигурация для работы с локализацией
- Особенности работы с Sub-path навигацией
- Особенности работы с локализацией на уровне домена
- Автоматическое определение языка пользователя
- Работа с локализацией внутри React Hooks
- Навигация внутри SPA-приложения с учётом локализации
- Сохранения предпочитаемого языка пользователя
- Работа с данными на Next.js-сервере с учётом локализации
- Сборка приложения с учётом локализации
Практика
- Научимся разрабатывать интернациональные приложения
+Обзор альтернативных решений
Разберёмся с альтернативными способами создания SSR-приложения.
Подробнее...
Альтернативные решения
- Подведение итогов по Next.js
- Разбор сильных и слабых сторон Next.js
- Разбор бизнес-кейсов для которых Next.js подходит идеально
- Разбор бизнес-кейсов для которых Next.js не лучшее решение
- Разбор инструментов для создание своего SSR-сервера с нуля
- Разбор базовой конфигурации самописного SSR-сервера
Практика
- Разберёмся c плюсами и минусами альтернативных решений
весь nextjs
Автор курса
Андрей Мулык
Преподаватель в компании Lectrum. За его плечами опыт работы с крупными международными outsource и outstaff компаниями, а также кураторство и проведение курсов фронтент и бекенд направлений.
Автор продвинутых фронтенд-курсов. Опыт в IT более 10 лет.
Новый уровень разработки
С наставником
- 16 часов live-занятий, 2 раза в неделю
- Домашние задания с проверкой и фидбеком
- Менторская поддержка в чате курса
- Альбом с записями всех занятий
- Исходный код примеров и файлы презентаций
- 24/7 доступ ко всему контенту курса
- Онлайн-сертификат