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

​ Существует множество фреймворков и библиотек, созданных поверх 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 плюсами и минусами альтернативных решений