Привет всем! Сегодня мы рассмотрим Next.js. Это гибкий #фреймворк React (да-да, о котором мы говорили в своей прошлой публикации), который предоставляет вам конструкторские блоки для создания быстрых веб-приложений. У него есть куча интересных функций прямо из коробки. Вместо того, чтобы говорить обо всем этом, мы сосредоточимся на одной функции, которую мы находим очень интересной и которая значительно ускоряет работу вашего веб-приложения.
Для тех, кто хочет узнать больше, Next.js обладает обширной документацией. Вам обязательно следует проверить её для получения более подробной информации.
Нашей темой в Next.js будет компонент image и то, как мы должны внедрять изображения в наши веб-сайты и веб-приложения.
В Next.js компонент image является расширением элемента HTML <img>
Однако, прежде чем говорить о компоненте image, мы должны сначала поговорить о самих изображениях.
Что такое изображения
#Изображения являются одним из самых важных элементов веб-сайта. Мы добавляем их для того, чтобы:
- дать пользователю лучший пользовательский опыт;
- визуально привлеките внимание;
- помочь пользователю лучше понять контент;
- направить взгляд вашего посетителя;
Поэтому неправильное их использование может привести к резкому замедлению работы нашего веб-сайта. А в мире, где все происходит быстро, люди, вероятно, не стали бы ждать загрузки наших веб-сайтов в течение 10 секунд.
Оптимизация изображений
- Используйте изображения правильного размера в соответствии с шириной устройства. Для рабочего стола вы можете использовать изображение 1920х1280. Но использование изображения того же размера для мобильного устройства с шириной устройства 375px приведет к ненужному замедлению работы вашего сайта.
- Используйте правильный формат для ваших изображений. Предлагается использовать формат #Webp, поскольку его качество такое же, как при использовании формата jpg или png, но он менее тяжелый.
WebP - это современный формат изображений, который обеспечивает превосходное сжатие изображений в Интернете без потерь и с потерями. Он поддерживается большинством браузеров. Проверьте здесь.
- Если вы используете много картинок на своем сайте, возможно, вам захочется добавить атрибут loading="lazy" к вашему элементу <img />. Таким образом, #браузер не будет отправлять никаких запросов на загрузку дополнительных ресурсов до тех пор, пока пользователи не попадут в поле зрения. Это повысит производительность и ускорит загрузку сайта, поскольку изображения запрашиваются тогда, когда они необходимы.
Всегда делайте это перед началом работы, чтобы избежать возможных ошибок.
- Используйте явные атрибуты ширины и высоты для предотвращения кумулятивного сдвига макета (CLS). Мы оставим вам эту статью в блоге для более детального ознакомления.
Теперь представьте, что вам не нужно проходить через все эти шаги, чтобы убедиться, что ваше изображение хорошо оптимизировано. Именно здесь на помощь приходит компонент Next.js <Image />.
Next.js и компонент Image
В Next.js, вместо традиционного элемента img, использование встроенного компонента #Image дает вам столько возможностей прямо из коробки, включая те, о которых мы еще не говорили. Но наше внимание будет сосредоточено на тех, которые мы уже проверили выше.
Оптимизация размера изображения
Когда изображение используется в компоненте Image, его размер автоматически оптимизируется в соответствии с шириной устройства. Это означает, что размер изображения 1920x1280 будет уменьшен, если пользователь зайдет на ваш сайт с мобильного устройства.
Next.js использует API для оптимизации изображений. При изменении размера экрана #размер изображения также изменяется в соответствии с определенными точками останова. Если вы не указали точки останова явно, значения по умолчанию будут такими:
module.exports = {
images: {
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
},
}
Оптимизация формата изображения
Мы уже говорили о том, что рекомендуется использовать формат Webp для изображений, когда мы используем их на наших сайтах. На самом деле, вы также можете проверить #Google Lighthouse из инспектора. Если формат изображения jpg или png, Lighthouse предложит вам использовать формат Webp для лучшей производительности.
Next.js справляется и с этим! Он меняет формат изображения на Webp, даже если это jpg или png и т.д. Вот код:
<div className={styles.imgWrapper}> <Image src="/pic.jpg" layout="fill" objectFit="cover" /> </div>
Вот вывод в браузере:
Вот сравнение использования jpg и Webp с одним и тем же изображением:
Ленивая загрузка
Помните, мы говорили о том, как важно использовать атрибут loading="lazy" для повышения производительности сайта? Это также автоматически выполняется компонентом Next.js Image. Изображения не будут отображаться до тех пор, пока они не попадут в начальную область просмотра.
Кумулятивный сдвиг макета (CLS)
Чтобы предотвратить CLS, изображения должны иметь явную ширину и высоту. Откройте Lighthouse и попробуйте сами. Он выдаст вам следующее предупреждение:
Для локальных изображений, используемых в компоненте Image, Next.js автоматически предоставляет эти значения. Это устраняет проблему. Однако для изображений, которые мы используем на наших сайтах, необходимо предоставить явные значения ширины и высоты. Поскольку Next.js не имеет доступа к удаленным файлам в процессе сборки. И на самом деле, он выдает это предупреждение:
Заключение
#Next.js пользуется большой популярностью не просто так. Существует множество других преимуществ создания веб-приложений с помощью этого фреймворка. Если вы являетесь разработчиком #React и хотите узнать больше, мы рекомендуем вам ознакомиться с их документацией. Она очень информативна и проста в изучении.
