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

Складчина: Продвинутый курс по 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 плюсами и минусами альтернативных решений

Скрытая ссылка