Next.js 11 был выпущен и принес много приятных функций и улучшений. В этом руководстве я расскажу о свойствах placeholder и blurDataURL, добавленных к компоненту Image, и о том, как мы можем использовать их для создания эффекта загрузки прогрессивного изображения, подобного приведенным здесь. на средних постах. Все это сохраняет встроенные оптимизации компонентов Next Image и лучшие практики. Вдобавок к этому я добавил TypeScript и TailwindCSS в качестве своего предпочтения, но не стесняйтесь использовать другие подходы.

Начальная загрузка проекта

Прежде всего, давайте создадим новый проект с шаблоном попутного ветра, выполнив первую строку команды ниже. После этого нам нужно установить Cloudinary для обработки ресурсов Cloudinary и base64-arraybuffer для преобразования буфера в base64, поскольку это тип, требуемый свойством blurDataURL.

Next.js изначально поддерживает TypeScript, поэтому его довольно легко включить. Просто создайте файл с именем tsconfig.json в корневом каталоге и запустите yarn dev. Затем файл заполнится конфигурациями по умолчанию.

Быстрое примечание

Next.js 11 упростил создание этого эффекта инкрементальной загрузки. Нам просто нужно добавить placeholder = `blur` для эффекта перехода размытия и добавить строку base64 в свойство blurDataURL, которое будет использоваться как изображение с низким разрешением, пока исходный размер еще не загружен.

Однако… у нас обычно нет изображений и base64, хранящихся локально. Часто он загружается из системы управления контентом или чего-то еще. Кроме того, было бы здорово, если бы существовал способ автоматически создавать base64 низкого разрешения для нас. Вот здесь и появляется Cloudinary. Cloudinary отлично подходит для сверхбыстрой доставки изображений по сети CDN и без особых усилий для выполнения преобразований. Эта настройка примерно такая же, как и в следующих разделах.

Настроить Cloudinary

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

Пошаговое руководство

Для максимальной производительности я буду обслуживать эту страницу статически, чтобы изображение в формате base64 и URL для получения исходного изображения уже присутствовали в приложении и не требовали дополнительных HTTP-запросов и обработки для их создания.

Тем не менее, мы можем создать файл в каталоге страниц, который будет служить нашим маршрутом и компонентом. Я назвал его gallery.tsx.

Я решил разместить метод getPictures в папке API, поэтому, если мне нужно повторно использовать логику в клиенте, я могу вызвать внутреннюю конечную точку API, чтобы получить те же данные.

Чтобы добавить файл, перейдите на страницы / api и создайте новый файл с именем pictures.ts и добавьте следующую логику:

Обратите внимание, что мы не экспортируем функцию по умолчанию из этого маршрута API. Мы просто размещаем его здесь, чтобы код был организован и хорошо продуман, если мы намерены повторно использовать эту логику в других местах.

Сначала мы получаем все ресурсы по имени тега, а затем сопоставляем его, чтобы получить URL-адрес эскиза, поскольку он не возвращается в ответе JSON. Не забудьте передать то же имя тега, которое вы присвоили изображениям в Cloudinary.

Хорошо, теперь у нас есть URL-адреса, однако для blurDataURL требуется строка base64. Итак, нам нужно получить URL-адрес, который возвращает буфер массива, а затем использовать метод encode из lib base64-arraybuffer для кодирования буфера массива в строку base64.

Все это мы делаем в функции fetchBase64, которая выполняется параллельно, а затем ждем всех результатов с помощью Promise.all. Поскольку Promise.all выводит массив обещаний в той же последовательности, что и входные, мы можем сопоставить их по индексу, чтобы сгенерировать объект ответа, который будет возвращен.

По крайней мере, не забудьте создать файл .env и объявить переменные с вашим именем облака, ключом API и секретом.

На этом урок завершен. Надеюсь, тебе понравилось. Я все еще новичок в написании руководств, поэтому дайте мне знать, есть ли что-то, что я могу улучшить, есть ли ошибки и т. Д.

Спасибо за ваше время!