Оптимизации

Next.js поставляется с различными встроенными оптимизациями, призванными улучшить скорость вашего приложения и Core Web Vitals. Это руководство расскажет об оптимизациях, которые вы можете использовать для повышения удобства использования вашего приложения.

Встроенные компоненты

Встроенные компоненты абстрагируют сложность реализации общих оптимизаций пользовательского интерфейса. Эти компоненты:

Изображения: Основаны на родном элементе <img>. Компонент изображения оптимизирует изображения для производительности, выполняя отложенную загрузку и автоматически изменяя размер изображений в зависимости от размера устройства.
Ссылка: Основаны на родных тегах <a>. Компонент ссылки предварительно загружает страницы в фоновом режиме для более быстрого и плавного перехода между страницами.
Скрипты: Основаны на родных тегах <script>. Компонент скрипта предоставляет вам контроль над загрузкой и выполнением скриптов третьих сторон.

Метаданные

Метаданные помогают поисковым системам лучше понимать ваш контент (что может привести к улучшению SEO) и позволяют настраивать отображение вашего контента в социальных сетях, помогая вам создавать более привлекательный и последовательный пользовательский опыт на различных платформах.

API метаданных в Next.js позволяет вам изменять элемент <head> страницы. Вы можете настроить метаданные двумя способами:

Метаданные на основе конфигурации: Экспортируйте статический metadata объект или динамическую generateMetadata функцию в файл layout.js или page.js.
Метаданные на основе файлов: Добавьте статические или динамически сгенерированные специальные файлы в сегменты маршрутов.

Кроме того, вы можете создавать динамические изображения Open Graph с помощью JSX и CSS с помощью конструктора imageResponse.

Статические ресурсы

Папка Next.js /public может использоваться для обслуживания статических ресурсов, таких как изображения, шрифты и другие файлы. Файлы внутри /public также могут кешироваться провайдерами CDN для эффективной доставки.

Аналитика и мониторинг

Для больших приложений Next.js интегрируется с популярными инструментами аналитики и мониторинга, чтобы помочь вам понять, как работает ваше приложение. Узнайте больше в руководствах OpenTelemetry и Инструментирование.