Оптимизация Next.js приложения для продакшена

Перед выгрузкой Next.js приложения в продакшен следует рассмотреть ряд оптимизаций и паттернов, которые обеспечат лучший пользовательский опыт, производительность и безопасность.

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

Автоматические оптимизации

Эти оптимизации Next.js включены по умолчанию и не требуют настройки:

• Серверные компоненты (Server Components): Next.js по умолчанию использует серверные компоненты. Они выполняются на сервере и не требуют JavaScript для рендеринга на клиенте, что не влияет на размер клиентских JavaScript-бандлов. Для интерактивности можно использовать клиентские компоненты (Client Components).
• Разделение кода (Code-splitting): Серверные компоненты позволяют автоматически разделять код по сегментам маршрутов. Также можно использовать ленивую загрузку (lazy loading) клиентских компонентов и сторонних библиотек.
• Предварительная загрузка (Prefetching): Когда ссылка на новый маршрут попадает в область видимости пользователя, Next.js предварительно загружает маршрут в фоне, что делает навигацию почти мгновенной. При необходимости можно отключить предварительную загрузку.
• Статический рендеринг (Static Rendering): Next.js рендерит серверные и клиентские компоненты на сервере во время сборки и кэширует результат для повышения производительности. Для отдельных маршрутов можно включить динамический рендеринг (Dynamic Rendering).
• Кэширование (Caching): Next.js кэширует запросы данных, результаты рендеринга компонентов, статические ресурсы и другое, чтобы уменьшить количество сетевых запросов. При необходимости кэширование можно отключить.

Эти настройки по умолчанию улучшают производительность приложения и уменьшают объем передаваемых данных.

Во время разработки

При разработке приложения рекомендуется использовать следующие возможности для обеспечения наилучшей производительности:

Маршрутизация и рендеринг

• Макеты (Layouts): Используйте макеты для общего UI между страницами и частичного рендеринга (partial rendering) при навигации.
• Компонент <Link>: Используйте для клиентской навигации и предзагрузки.
• Обработка ошибок (Error Handling): Создавайте кастомные страницы для перехвата ошибок и 404 ошибок.
• Серверные и клиентские компоненты: Следуйте рекомендациям по композиции и проверяйте размещение "use client" границ.
• Динамические API: Учтите, что использование cookies или searchParams включает динамический рендеринг для всего маршрута. Оберните их в <Suspense> при необходимости.

Полезно знать: Частичный предрендеринг (экспериментальный) позволит делать части маршрута динамическими без перевода всего маршрута в динамический рендеринг.

Загрузка данных и кэширование

• Серверные компоненты: Используйте преимущества загрузки данных на сервере.
• Обработчики маршрутов (Route Handlers): Используйте для доступа к бэкенду из клиентских компонентов. Не вызывайте их из серверных компонентов.
• Стриминг (Streaming): Используйте Loading UI и React Suspense для постепенной отправки UI с сервера.
• Параллельная загрузка данных (Parallel Data Fetching): Уменьшайте водопады запросов. Рассмотрите предзагрузку данных (preloading).
• Кэширование данных (Data Caching): Проверьте кэширование запросов. Для запросов без fetch используйте unstable_cache.
• Статические изображения: Используйте директорию public для кэширования статических ресурсов.

UI и доступность

• Формы и валидация: Используйте Server Actions для обработки форм и валидации на сервере.

• Модуль шрифтов (Font Module): Оптимизируйте шрифты, уменьшая сдвиг макета (layout shift).
• Компонент <Image>: Оптимизируйте изображения (форматы WebP, предотвращение сдвига макета).
• Компонент <Script>: Оптимизируйте сторонние скрипты (отложенная загрузка).
• ESLint: Используйте eslint-plugin-jsx-a11y для проверки доступности.

Безопасность

• Защита данных (Tainting): Защищайте чувствительные данные от попадания на клиент.
• Server Actions: Проверяйте авторизацию пользователей. Следуйте рекомендациям по безопасности.

• Переменные окружения: Добавляйте .env.* в .gitignore. Публичные переменные должны иметь префикс NEXT_PUBLIC_.
• Политика безопасности контента (CSP): Защищайтесь от XSS и других атак.

Метаданные и SEO

• API метаданных: Улучшайте SEO (заголовки, описания).
• OG-изображения: Подготовьте изображения для соцсетей.
• Карта сайта (Sitemaps) и robots.txt: Помогите поисковым системам индексировать страницы.

Типизация

• TypeScript и TS Plugin: Используйте для повышения надежности кода.

Перед выгрузкой в продакшен

Перед выгрузкой выполните next build для проверки ошибок сборки и next start для тестирования производительности.

Core Web Vitals

• Lighthouse: Запускайте в режиме инкогнито для оценки пользовательского опыта.

• Хук useReportWebVitals: Отправляйте данные Core Web Vitals в аналитику.

Анализ бандлов

Используйте @next/bundle-analyzer для анализа размеров JavaScript-бандлов.

Дополнительные инструменты:

• Import Cost
• Package Phobia
• Bundle Phobia
• bundlejs