Продвинутый курс по Next.js: создание SPA & SSR-приложений [Lectrum] [Андрей Мулык]

[admin]

Существует множество фреймворков и библиотек, созданных поверх React, чтобы улучшить понимание и ускорить разработку. Один из самых популярных фреймворков — Next.js.

Фреймворк Next.js позволяет рендерить React-приложения на сервере, благодаря этой технологии ваши приложения будут невероятно быстрыми и удобными.

Next.js поможет вам:

Вывести сайт в топ при ранжировании в поисковых системах.
Повысить качество отрисовки контента для моментальной загрузке сайта.
Добиться высокой скорости работы сайта на различных мобильных устройствах.
Получить высокий PageSpeed (90+).
Перенести SPA-приложение на SSR, если вы уже начали этот процесс и столкнулись со сложностями.
Cократить время внедрения Next.js в проект.
Научиться легко работать с GraphQL в контексте всех технических сложностей SSR.
Научиться работать с Redux не только на клиенте, но и на SSR-сервере.
Научиться работать с большими React-приложениями, которые поддерживают работу с локализацией в контексте SSR-технологии.




Структура курса
1. Базовая настройка React-приложения с помощью Next.js
Разберёмся с особенностями настройки React-приложения для SSR.

Введение в SSR-приложения
Особенности SPA & SSR-приложений
Введение в Next.js
Базовая настройка Next.js для классического React SPA-приложения
Разбор самых популярных ошибок при работе с Next.js
Научимся правильно конфигурировать приложение для SSR
Продвинутый роутинг в Next.js

Углубимся в принципы построения навигации в SSR-приложении
Работа с динамическими страницами
Навигация с помощью Link
Роутинг с помощью хуков
Разберёмся с навигацией в SSR-приложении
2. Работа с REST & GraphQL данными на сервере

Работа с данными на сервере

Работа с 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-приложения

Сборка приложения для запуска в Docker-контейнере
Запуск приложения в облаке
Сборка приложения для запуска с помощью Nginx
Научимся правильно собирать и упаковывать в Docker-контейнер Next.js приложение
4. Локализация Next.js-приложения

Базовая конфигурация для работы с локализацией
Особенности работы с Sub-path навигацией
Особенности работы с локализацией на уровне домена
Автоматическое определение языка пользователя
Работа с локализацией внутри React Hooks
Навигация внутри SPA-приложения с учётом локализации
Сохранения предпочитаемого языка пользователя
Работа с данными на Next.js-сервере с учётом локализации
Сборка приложения с учётом локализации
Научимся разрабатывать интернациональные приложения
Обзор альтернативных решений

Подведение итогов по Next.js
Разбор сильных и слабых сторон Next.js
Разбор бизнес-кейсов для которых Next.js подходит идеально
Разбор бизнес-кейсов для которых Next.js не лучшее решение
Разбор инструментов для создание своего SSR-сервера с нуля
Разбор базовой конфигурации самописного SSR-сервера
Разберёмся c плюсами и минусами альтернативных решений


lectrum.io/course/nextjs