Ресурсы

Next.js может обслуживать статические ресурсы, такие как изображения, из корневой директории public. Файлы внутри public можно ссылаться из корня приложения аналогично pages.

Директория public также полезна для robots.txt, Google Site Verification и других статических ресурсов. Ознакомьтесь с документацией по Обслуживанию статических файлов для получения дополнительной информации.

Загрузка вашего аватара

Сначала давайте загрузим ваш аватар.

• Скачайте ваш аватар в формате .jpg (или используйте этот файл).
• Создайте директорию images внутри директории public.
• Сохраните изображение как profile.jpg в директории public/images.
• Размер изображения может быть примерно 400px на 400px.
• Вы можете удалить неиспользуемый SVG-файл логотипа непосредственно в директории public.

Неоптимизированное изображение

В обычном HTML вы бы добавили свой аватар следующим образом:

<img src="/images/profile.jpg" alt="Your Name" />

Однако это означает, что вам придется вручную обрабатывать:

• Обеспечение адаптивности изображения на экранах разного размера
• Оптимизацию изображений с помощью сторонних инструментов или библиотек
• Загрузку изображений только при их попадании в область видимости

И многое другое. Вместо этого Next.js предоставляет компонент Image из коробки для решения этих задач.

Компонент Image и оптимизация изображений

next/image — это расширение HTML-элемента <img>, адаптированное для современного веба.

Next.js также поддерживает оптимизацию изображений по умолчанию. Это позволяет изменять размер, оптимизировать и обслуживать изображения в современных форматах, таких как WebP, когда браузер поддерживает их. Это предотвращает загрузку больших изображений на устройства с маленькими экранами. Также Next.js может автоматически использовать будущие форматы изображений и обслуживать их в поддерживающих браузерах.

Автоматическая оптимизация изображений работает с любым источником. Даже если изображение размещено на внешнем источнике данных, например CMS, его всё равно можно оптимизировать.

Использование компонента Image

Вместо оптимизации изображений во время сборки, Next.js оптимизирует их по запросу пользователей. В отличие от генераторов статических сайтов и чисто статических решений, время сборки не увеличивается, независимо от того, 10 изображений или 10 миллионов изображений вы используете.

Изображения по умолчанию загружаются лениво (lazy loading). Это означает, что скорость загрузки страницы не страдает из-за изображений вне области видимости. Изображения загружаются по мере прокрутки в область видимости.

Изображения всегда рендерятся таким образом, чтобы избежать Кумулятивного сдвига макета (CLS), одного из Основных показателей веб-виталов (Core Web Vitals), который Google будет использовать в ранжировании поиска.

Вот пример использования next/image для отображения нашего аватара. Пропсы height и width должны соответствовать желаемому размеру отображения с тем же соотношением сторон, что и исходное изображение.

Примечание: Мы будем использовать этот компонент позже в разделе "Улучшение макета", пока не нужно его копировать.

import Image from 'next/image';
 
const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Путь к файлу изображения
    height={144} // Желаемый размер с правильным соотношением сторон
    width={144} // Желаемый размер с правильным соотношением сторон
    alt="Your Name"
  />
);

Чтобы узнать больше об автоматической оптимизации изображений, ознакомьтесь с документацией.

Чтобы узнать больше о компоненте Image, ознакомьтесь с API-справочником next/image.