Контрольный список для продакшена
Перед тем как вывести ваше Next.js приложение в продакшен, следует рассмотреть ряд оптимизаций и паттернов, которые помогут обеспечить наилучший пользовательский опыт, производительность и безопасность.
На этой странице представлены лучшие практики, которые можно использовать в качестве справочника при разработке приложения, перед выводом в продакшен и после развертывания, а также автоматические оптимизации Next.js, о которых следует знать.
Автоматические оптимизации
Эти оптимизации Next.js включены по умолчанию и не требуют дополнительной настройки:
- Разделение кода (Code-splitting): Next.js автоматически разделяет код приложения по страницам, загружая только необходимый код при навигации. Также можно использовать ленивую загрузку (lazy loading) сторонних библиотек, где это уместно.
- Предзагрузка (Prefetching): Когда ссылка на новый маршрут попадает в область видимости пользователя, Next.js предзагружает маршрут в фоновом режиме, что делает навигацию практически мгновенной. При необходимости можно отключить предзагрузку.
- Автоматическая статическая оптимизация (Automatic Static Optimization): Next.js автоматически определяет, что страница статическая (может быть предварительно отрендерена), если у неё нет блокирующих требований к данным. Оптимизированные страницы могут кэшироваться и обслуживаться пользователю из нескольких CDN-локаций. При необходимости можно использовать рендеринг на стороне сервера (Server-side Rendering).
Эти настройки по умолчанию направлены на повышение производительности приложения и уменьшение объема передаваемых данных при каждом сетевом запросе.
Во время разработки
При разработке приложения рекомендуется использовать следующие функции для обеспечения наилучшей производительности и пользовательского опыта:
Маршрутизация и рендеринг
- Компонент
<Link>: Используйте компонент<Link>для клиентской навигации и предзагрузки. - Кастомные ошибки (Custom Errors): Грамотно обрабатывайте 500 и 404 ошибки.
Загрузка данных и кэширование
- API маршруты (API Routes): Используйте обработчики маршрутов для доступа к бэкенд-ресурсам и предотвращения раскрытия чувствительных данных клиенту.
- Кэширование данных (Data Caching): Проверьте, кэшируются ли ваши запросы данных, и при необходимости включите кэширование. Убедитесь, что запросы, не использующие
getStaticProps, кэшируются там, где это необходимо. - Инкрементальная статическая регенерация (Incremental Static Regeneration): Используйте инкрементальную статическую регенерацию для обновления статических страниц после их сборки без необходимости пересобирать весь сайт.
- Статические изображения (Static Images): Используйте директорию
publicдля автоматического кэширования статических ресурсов приложения, например изображений.
UI и доступность
- Модуль шрифтов (Font Module): Оптимизируйте шрифты с помощью модуля шрифтов, который автоматически размещает ваши файлы шрифтов вместе с другими статическими ресурсами, удаляет внешние сетевые запросы и уменьшает сдвиг макета (layout shift).
- Компонент
<Image>: Оптимизируйте изображения с помощью компонента Image, который автоматически оптимизирует изображения, предотвращает сдвиг макета и обслуживает их в современных форматах, таких как WebP или AVIF. - Компонент
<Script>: Оптимизируйте сторонние скрипты с помощью компонента Script, который автоматически откладывает скрипты и предотвращает их блокировку основного потока. - ESLint: Используйте встроенный плагин
eslint-plugin-jsx-a11yдля раннего выявления проблем с доступностью.
Безопасность
- Переменные окружения (Environment Variables): Убедитесь, что ваши файлы
.env.*добавлены в.gitignore, и только публичные переменные имеют префиксNEXT_PUBLIC_. - Политика безопасности контента (Content Security Policy): Рассмотрите возможность добавления политики безопасности контента для защиты вашего приложения от различных угроз, таких как межсайтовый скриптинг, кликджекинг и другие атаки с внедрением кода.
Метаданные и SEO
- Компонент
<Head>: Используйте компонентnext/headдля добавления заголовков страниц, описаний и другого.
Типобезопасность
- TypeScript и TS плагин: Используйте TypeScript и плагин TypeScript для улучшения типобезопасности и раннего выявления ошибок.
Перед выводом в продакшен
Перед выводом в продакшен можно выполнить next build для локальной сборки приложения и выявления ошибок сборки, а затем запустить next start для измерения производительности приложения в среде, приближенной к продакшену.
Core Web Vitals
- Lighthouse: Запустите Lighthouse в режиме инкогнито, чтобы лучше понять, как пользователи будут взаимодействовать с вашим сайтом, и выявить области для улучшения. Это симулированный тест, который следует дополнять полевыми данными (например, Core Web Vitals).
Анализ бандлов
Используйте плагин @next/bundle-analyzer для анализа размера ваших JavaScript-бандлов и выявления крупных модулей и зависимостей, которые могут влиять на производительность приложения.
Дополнительно следующие инструменты помогут вам понять влияние добавления новых зависимостей в ваше приложение:
После развертывания
В зависимости от места развертывания вашего приложения у вас могут быть доступны дополнительные инструменты и интеграции для мониторинга и улучшения производительности приложения.
Для развертываний на Vercel рекомендуем следующее:
- Аналитика: Встроенная панель аналитики для понимания трафика вашего приложения, включая количество уникальных посетителей, просмотры страниц и другое.
- Speed Insights: Реальные данные о производительности на основе данных посетителей, предлагающие практический взгляд на то, как ваш сайт работает в реальных условиях.
- Логирование: Логи выполнения и активности для отладки проблем и мониторинга приложения в продакшене. Также см. страницу интеграций для списка сторонних инструментов и сервисов.
Полезно знать:
Для получения всестороннего понимания лучших практик развертывания в продакшене на Vercel, включая детальные стратегии улучшения производительности сайта, обратитесь к чек-листу Vercel для продакшена.
Следование этим рекомендациям поможет вам создать более быстрое, надежное и безопасное приложение для ваших пользователей.