Оптимизация Next.js приложения для продакшена
Перед выгрузкой Next.js приложения в продакшен следует рассмотреть ряд оптимизаций и паттернов, которые обеспечат лучший пользовательский опыт, производительность и безопасность.
На этой странице представлены лучшие практики, которые можно использовать в качестве справочника при разработке приложения и перед выгрузкой в продакшен, а также автоматические оптимизации Next.js, о которых следует знать.
Автоматические оптимизации
Эти оптимизации Next.js включены по умолчанию и не требуют настройки:
- Разделение кода (Code-splitting): Next.js автоматически разделяет код приложения по страницам, загружая только необходимый код при навигации. Можно использовать ленивую загрузку (lazy loading) сторонних библиотек.
- Предварительная загрузка (Prefetching): Next.js предварительно загружает маршруты в фоне для почти мгновенной навигации. При необходимости можно отключить.
- Автоматическая статическая оптимизация (Automatic Static Optimization): Next.js автоматически определяет статические страницы (без блокирующих запросов данных) и кэширует их. Для динамических страниц можно использовать рендеринг на стороне сервера (SSR).
Эти настройки по умолчанию улучшают производительность приложения и уменьшают объем передаваемых данных.
Во время разработки
При разработке приложения рекомендуется использовать следующие возможности для обеспечения наилучшей производительности:
Маршрутизация и рендеринг
- Компонент
<Link>: Используйте для клиентской навигации. - Кастомные ошибки: Настройте страницы для 500 и 404 ошибок.
Загрузка данных и кэширование
- API маршруты (API Routes): Используйте для доступа к бэкенду.
- Кэширование данных: Проверьте кэширование запросов.
- Инкрементальная статическая регенерация (ISR): Обновляйте статические страницы без полной пересборки.
- Статические изображения: Используйте директорию
publicдля статических ресурсов.
UI и доступность
- Модуль шрифтов (Font Module): Оптимизируйте шрифты, уменьшая сдвиг макета (layout shift).
- Компонент
<Image>: Оптимизируйте изображения (форматы WebP, предотвращение сдвига макета). - Компонент
<Script>: Оптимизируйте сторонние скрипты (отложенная загрузка). - ESLint: Используйте
eslint-plugin-jsx-a11yдля проверки доступности.
Безопасность
- Переменные окружения: Добавляйте
.env.*в.gitignore. Публичные переменные должны иметь префиксNEXT_PUBLIC_. - Политика безопасности контента (CSP): Защищайтесь от XSS и других атак.
Метаданные и SEO
- Компонент
<Head>: Используйте для управления метаданными.
Типизация
- TypeScript и TS Plugin: Используйте для повышения надежности кода.
Перед выгрузкой в продакшен
Перед выгрузкой выполните next build для проверки ошибок сборки и next start для тестирования производительности.
Core Web Vitals
- Lighthouse: Запускайте в режиме инкогнито для оценки пользовательского опыта.
Анализ бандлов
Используйте @next/bundle-analyzer для анализа размеров JavaScript-бандлов.
Дополнительные инструменты: