Являются ли встроенный компонент изображений и автоматическая оптимизация изображений в Next.js 10 альтернативой изображениям Gatsby?

Начиная с версии 10.0.0, Next.js имеет встроенный компонент Image и автоматическую оптимизацию изображений.

Компонент изображения, next/image, является расширением элемента HTML <img>, который был разработан для современной сети.

Что делает next / image под капотом?

  1. Автоматически обслуживает изображения в современных форматах изображений, таких как WebP, который примерно на 30% меньше, чем JPEG, если браузер поддерживает его.
  2. Оптимизируйте изображения по запросу. Время сборки не изменится.
  3. Ленивая загрузка изображения внутри страницы только при достижении определенного порога при прокрутке области просмотра.
  4. Вы можете решить использовать его с внутренним CDN Vercel или с другими поставщиками, такими как Cloudinary или Akamai.
  5. Вы можете указать разные размеры изображения для разных и настраиваемых разрешений, которые будут использоваться динамически.
  6. Автоматически изменяет качество фотографии на более низкий порог, установленный на 75%. Это можно изменить для каждого вызова.

Как вы можете это использовать?

Во-первых, вам нужно будет запустить следующую версию 10+:

npm install next@latest react@latest react-dom@latest

Или, если вы используете пряжу:

yarn add next@latest react@latest react-dom@latest

Как я могу использовать это на практике?

Этот пример страницы будет преобразован из обычного тега img:

Преобразовано в новый формат 'next/image':

Переместите className за пределы тега ‹Image›!

Вам нужно будет переместить className за пределы вашего старого тега img из-за изменений, которые новый компонент изображения Next внесет во время выполнения в полученный HTML-код. При перемещении классов во внешний элемент к вашему изображению будет применен каждый стиль.

Обязательный реквизит!

Вам нужно будет всегда проходить width и height. Эти реквизиты обязательны, и если вы их не передадите, вам нужно будет пройти layout="fill".

Типы макетов

Вы можете использовать четыре различных типа значений макета (по умолчанию intrinsic):

  • fixed - размеры изображения не изменятся при изменении области просмотра (нет отзывчивости).
  • intrinsic - Изображение будет уменьшено в размерах для меньших видовых экранов, но сохранит исходные размеры для больших видовых экранов.
  • responsive - Размер изображения будет уменьшаться для меньших видовых экранов и увеличиваться для больших видовых экранов.
  • fill - изображение будет растягиваться по ширине и высоте до размеров родительского элемента.

Важные предостережения

Локальные и удаленные изображения

По состоянию на ноябрь 2020 года только Vercel автоматически выполняет оптимизацию изображений для ваших проектов Next. По умолчанию в репозиторий Git локально загружаются только изображения.

Хотя это может быть полезно для базового приложения, команда Vercel обычно рекомендует загружать контент (который также включает изображения) из автономной CMS, такой как Sanity.

Для этого вам нужно будет передать дополнительное свойство images в ваш next.config.js файл, как показано в этом примере:

module.exports = {
  images: {
    domains: ['example.com'],
  },
}

CDN

Еще одно предостережение: если вы не используете Cloudinary или поддерживаемые в настоящее время загрузчики, вам нужно подождать или добавить поддержку других сервисов CDN изображений, таких как:

Если вы хотите узнать больше о крючках

Я лично прочитал Learn React Hooks, когда начал использовать хуки и NextJ, это помогало мне каждый день лучше понимать React, его синтаксис и экосистему плагинов и библиотек: https: // amzn .to / 2UFiZ5F

Ресурсы