Оптимизация
Next.js предоставляет множество встроенных оптимизаций, предназначенных для повышения скорости вашего приложения и улучшения Core Web Vitals. В этом руководстве рассматриваются оптимизации, которые вы можете использовать для улучшения пользовательского опыта.
Встроенные компоненты
Встроенные компоненты упрощают реализацию распространённых оптимизаций пользовательского интерфейса. К ним относятся:
- Изображения: Основаны на нативном элементе
<img>. Компонент Image оптимизирует изображения для производительности, используя ленивую загрузку и автоматическое изменение размера в зависимости от устройства. - Ссылки: Основаны на нативных тегах
<a>. Компонент Link предварительно загружает страницы в фоновом режиме для более быстрых и плавных переходов. - Скрипты: Основаны на нативных тегах
<script>. Компонент Script предоставляет контроль над загрузкой и выполнением сторонних скриптов.
Метаданные
Метаданные помогают поисковым системам лучше понимать ваш контент (что может улучшить SEO) и позволяют настраивать отображение вашего контента в социальных сетях, создавая более вовлекающий и согласованный пользовательский опыт на разных платформах.
API Metadata в Next.js позволяет изменять элемент <head> страницы. Вы можете настроить метаданные двумя способами:
- Конфигурационные метаданные: Экспортируйте статический объект
metadataили динамическую функциюgenerateMetadataв файлеlayout.jsилиpage.js. - Файловые метаданные: Добавляйте статические или динамически генерируемые специальные файлы в сегменты маршрутов.
Кроме того, вы можете создавать динамические Open Graph изображения с использованием JSX и CSS через конструктор imageResponse.
Статические ресурсы
Папка /public в Next.js может использоваться для размещения статических ресурсов, таких как изображения, шрифты и другие файлы. Файлы в /public также могут кэшироваться CDN-провайдерами для эффективной доставки.
Аналитика и мониторинг
Для крупных приложений Next.js интегрируется с популярными инструментами аналитики и мониторинга, помогая понять производительность вашего приложения. Подробнее в руководствах по OpenTelemetry и инструментированию.