Next.js - один из самых популярных фреймворков для создания веб-приложений. Он быстрый, гибкий и лежит в основе крупнейших сайтов в интернете.
Но когда дело доходит до создания готового к продакшену приложения, настройка проекта на Next.js может стать настоящим испытанием.
С появлением App Router и React Server Components произошли значительные изменения в том, как строятся и структурируются приложения. Вам также нужно будет принять решения относительно подходов к стилизации, стратегий загрузки данных, тестирования и CI/CD-пайплайна. Это может быть довольно сложно.
Вот лишь некоторые из проблем, с которыми сталкиваются разработчики Next.js:
Неопределенность с маршрутизацией:
Какой маршрутизатор выбрать - App Router или устаревший pages router? Какие компромиссы необходимо учитывать?
Сложности с компонентами:
Когда следует использовать клиентские компоненты, а когда React Server Components? Как оптимально обрабатывать контекст и обмен данными?
Проблемы с производительностью:
Почему ваше приложение кажется медленным? Как можно оптимизировать загрузку данных и рендеринг?
Аутентификация:
Как безопасно управлять аутентификацией и сессиями пользователей?
Деплой:
Как обеспечить надежный и безопасный деплой приложений на Next.js с минимальным временем простоя и количеством ошибок?
Масштабируемость:
Как подготовить приложение на Next.js к росту пользовательской нагрузки?
Работа с Next.js не должна вызывать замешательство. Независимо от того, являетесь ли вы новичком или опытным разработчиком, стремящимся освоить последние обновления, Pro NextJS научит вас всему, что необходимо для уверенного создания веб-приложений.
Эта серия самообучающих мастер-классов содержит глубокие знания, примеры из реальной жизни и практические советы, которые помогут вам понять все нюансы работы с Next.js.
Что включает курс
Знакомство с Next.js
В первом мастер-классе мы затронем все самые важные аспекты работы с Next.js. Вместо обычного приложения "Список дел" вы создадите полноценное приложение, напоминающее ChatGPT. Вот что мы рассмотрим:
- Настройка проекта и деплой: Конфигурация Next.js приложения с TypeScript, ESLint и Tailwind CSS, а также непрерывное развертывание на Vercel.
- Маршрутизация и макеты: Использование App Router для создания маршрутов и макетов, влияющих на загрузку данных и навигацию.
- Аутентификация: Реализация аутентификации пользователей и управление сессиями.
- Потоковые ответы AI: Построение динамичного чата с подключением к API OpenAI и потоковой передачей ответов в реальном времени.
- Интеграция с базой данных: Хранение данных чата в базе данных Vercel Postgres.
Стилизация приложений Next.js
Развитие способов стилизации веб-приложений продолжает идти вперед, но с появлением App Router и React Server Components возникли новые вызовы. Этот модуль погрузит вас в популярные методы создания отзывчивых и готовых к темизации интерфейсов на Next.js. В частности:
- CSS Modules: Классический, но иногда громоздкий способ стилизации компонентов.
- Tailwind CSS: Подход к использованию утилитных классов, требующий некоторых шагов по конфигурации для поддержания читаемости.
- StyleX: Библиотека от Meta для детального управления компонентами, токенами дизайна и темами.
- Pigment CSS: Библиотека стилей от команды Material UI, оптимизированная для React Server Components.
- Emotion: Несмотря на то, что это не самый современный подход, многие приложения по-прежнему используют Emotion для стилизации. Узнайте, как настроить библиотеку для поддержки App Router.
Инфраструктура проекта
Для современных приложений Next.js существует множество инструментов, фреймворков и процессов - особенно при работе в команде. Этот модуль курса предлагает лучшие практики для построения надежной инфраструктуры проекта. Вот что вы изучите:
- Кодовый стиль и консистентность: Использование ESLint и Prettier для поддержания стиля кода.
- Организация компонентов: Взвешивание плюсов и минусов различных стратегий организации проекта.
- Создание библиотеки компонентов: Работа с Storybook для создания и документирования компонентов.
- Тестирование: Написание тестов с использованием Jest, Vitest, Cypress и Playwright.
- Управление монорепозиторием: Turborepo для совместного использования кода и управления зависимостями.
- Клиентские и серверные компоненты: Углубленное изучение клиентских компонентов и RSC, включая стратегии обработки контекста и обмена данными.
Взаимодействие клиента и сервера
После развертывания Next.js приложения существует множество факторов, влияющих на производительность и пользовательский опыт. Этот модуль охватывает продвинутые темы взаимодействия клиента и сервера:
- Стратегии кэширования: Различные варианты кэширования и повторной проверки данных, включая поддержку API маршрутов и управление кэшем с помощью тегов.
- Загрузка файлов: Использование серверных действий и API маршрутов для работы с локальными и облачными загрузками файлов.
- Архитектура системы: Изучение различных архитектурных паттернов для взаимодействия клиента и сервера, включая Backend-for-Frontend, серверные действия и работу с токенами.
- Продвинутые серверные действия: Построение симулятора CDN, перехват клиентских запросов и создание решений для потоковой передачи данных.
- Гранулированный Suspense: Построение приложения для работы с биржевыми данными, используя Suspense для улучшения отзывчивости.
От настройки проекта до деплоя, стилизации и управления инфраструктурой, Pro NextJS охватывает всё. Вы будете учиться на практике с помощью реальных примеров и заданий, чтобы повысить свою уверенность в работе с Next.js.
Начните уже сейчас!