🖥️ Frontend [pronextjs] Next.js без лишних слов: Решения для корпоративных приложений (2024)

[Ho Lee Fuk]

Автор: pronextjs

Название: Next.js без лишних слов: Решения для корпоративных приложений (2024)

Описание:

The No-BS Solution for Enterprise-Ready Next.js Applications

pronextjs

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.

Начните уже сейчас!

Материал на английском языке

Подробнее:

Скачать:

🔒

Доступ ограничен

Авторизуйтесь, чтобы увидеть цену и получить доступ к материалам

Вход Регистрация