Оптимизации
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 и Инструментированию.