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