NextJS 13. Оптимизация изображений

Фреймворк NextJS предлагает собственный компонент Image для оптимизации картинок. Он позволяет автоматически генерировать современные форматы изображений, такие как webp и avif, разные размеры картинки под разные устройства, обеспечивает ленивую подгрузку и многое другое.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...

[@НикитаАверьянов-е2ь]

Классный функционал! Очень удобно, конечно, что такая оптимизация теперь не требует много усилий от тебя.

[@ilyaprotsenko1023]

Спасибо! Ещё про параллельные роуты и перехватывающие роуты интересно было бы послушать в твоём исполнении)

[@olegsh2888]

Словил флэшбэки, как мы писали подобный компонент, но сами) Михаил, спасибо за обзорные ролики по Нексту! Я хоть на нем и не пишу, но смотрю, впитываю на будущее) Пытаюсь убедить бизнес перейти на него с самопального SSR. Уже почти смог)

[@arman-6172]

Отличный материал и подача! Спасибо!) По картинкам хорошо бы ещё уточнить: 1. Если WebP не поддерживает браузер, то отдаст оригинал. При этом, если был оригинал WebP, то сконвертирует в JPG, что плохо, так как теряет альфа-канал. Держать все с прозрачностью в PNG тяжело по размеру. Не нашел конфиг, чтобы изменить такое поведение, кажется, захардкодили, судя по исходникам. 2. По sizes всё-таки подробнее рассказать, как оптимизирует, когда картинка не на весь экран, и как он работает с ретинами. 3. Кэширование нарезки превью. По умолчанию очень маленький кэш на время, а для больших картинок нужно держать огромный оригинал, что, соответственно, давит на CPU. В перспективе было бы здорово, если добавишь материалы продвинутого уровня, например: оптимизация под Lighthouse, тестирование, логирование браузерных ошибок, ISR на запрос от CMS, сборка в Docker-образ, мониторинг продакшн и т.д. =)

[@three-zeros]

Михаил, спасибо за Ваши уроки, благодаря Вам вчера получил первый офер!!)) Пожалуйста, расскажите в Вашем новом видео о том, как работать с Firebase в Нексте! Буду очень благодарен!

[@NeoCoding]

спасибо за видосик. как раз работал с новыми картинками только что. там кстати как я понял, если нужен именно респонсив-вариант, чтобы картинки адекватно изменялись при изменении размеров экрана, то именно теперь всё на fill завязано, а не как раньше layout="responsive". В итоге, пришлось убирать размеры из Image, ставить fill, а размеры делать через css. На мой взгляд удобнее было как раньше указал размеры, и поставил layout responsive. чтобы всё автоматом работало. Если не делать обёртку и указать размеры то надо возится с sizes и прописывать адаптивы, но это имхо путь тайлвинда, который противоречит моим убеждениям, что код и стиль должны быть разнесены.

[@dimitriy8689]

Спасибо за видео

[@alexanderkomanov4151]

Спасибо огромное!

[@ShaftiloO]

Если не сложно, сделайте, пожалуйста, видео по актуальной локализации сайта в next js 13 - тк судя по всему, вариантов сделать это сейчас появилось много и все они очень различаются. Если добавите локализацию и рутов - вообще было бы супер

[@true227]

по поводу атрибута alt вот что пишут на странице некста: If the image is purely decorative or not intended for the user, the alt property should be an empty string (alt=""). И это относится не только к нексту. Они в свою очередь взяли эту информацию из спека. Т.е. если изображение бэкграунд, то альт должен быть пустым. И еще: насколько я понял картинки заданные через background-image css не оптимизируются некстом

[@balnazzzar1679]

Спасибо за уроки по next13. Подскажите а будет ли в ближайшее время урок по интернационализации ?

[@mishanep]

Здравствуйте. По интернационализации пока не планировал.

[@balnazzzar1679]

@@mishanep очень жаль, было бы интересно посмотреть, там как раз какие-то изменения в next

[@dmitri683]

Михаил здравствуйте! Вы знаете как происходит процесс получения оптимизированной картинки? Этот механизм внутри библиотек некста иди некст отправляет картинку в сторонний сервис? Мне недавно главный девопс сказал не оптимизировать картинки, так как нечего тут трафик гонять лишний раз в Германию, он имел в виду что сервис который якобы оптимизирует картинки для некста наверняка находятся в Европе и что проще оставить картинку в изначальном в виде, зато трафика больше не станет, хочу понять насколько истинно такое суждение 🤔

[@slavapaw9006]

это бред

[@sergiigulaga1486]

Оптимизация работает если делать deploy через Vercel. Если через сторонний сервис то есть вероятность что оптимизации не будет. В одном из интервью на канале Vercel об етом говорилось.

[@sozdanie-saytov]

Круто

[@letonik72]

Подскажите пожалуйста плагин, для отображения размера импортов как у автора, на Php storme

[@maratfaizer]

Спасибо за видео! Вопрос: за счет чего работатает priority? в ущерб чему?

[@oleksiishe7417]

на сколько стабилен generateStaticParams у меня с ним build не всегда работает, хотя делаю все как на видео, back end у меня на мангоДб, апи делаю на NextJs было у вас так ?

[@andyjs666]

C есть одна проблема. К сожалению, он не предназначен для генерации статических сайтов (SSG). Вот почему в Gatsby смогли сделать, а тут всё никак?

[@NikolayN707]

хотелось бы увидеть видео про PWA на nextjs

[@МаксимКоротчий]

Подскажите, пожалуйста, как отключить минификацию html в dev-режиме next js?

[@govorov_top]

Михаил, здравствуйте! Спасибо за полезное видео. У меня возник вопрос по поводу момента на 3:55, где Next.js рекомендует указывать размеры изображений для предотвращения 'дёрганий' на странице. Как быть в случае адаптивного дизайна? Если я разрабатываю 'Desktop First', то размеры, например, 500x500 понятны. Но что делать, если экран у пользователя 992px или меньше? Как в этом случае быть с данными размерами? Если это уже описано в документации то я не нашел))))

[@lisofsky8151]

когда можно будет купить курс nextjs ?

[@sori32009]

Михаил, подскажи пожалуйста, какую библиотеку вы используете для всплывающей анимации на своем новом проекта в next js?

[@mishanep]

Framer motion. У меня есть цикл видео по ней.

[@vladislavkhantaev3343]

Надеюсь вы сможете помочь, почему при запуске в дев все изображаются корректно, но при билде и запуск на сервере и просмотр через домен часть изображений не отображаются?

[@justpeace7852]

Михаил, извиняюсь а у вас есть курс по next js ??

[@mishanep]

Пока только то, что на Ютуб.

[@biLLie_wiLLie]

Подскажите плиз - для картинок мне часто надо width 100%, height 100%, object-fit cover - что я должен для этого в компоненте image прописать тогда?

[@mishanep]

По описанию похоже на fill. Только родителю position relative надо задать.

[@nazamosk7728]

Здраствуйте. Будет ли видео как использовать редакс в некст приложение?

[@mishanep]

Нет. У меня есть видео про клиентские компоненты, где я разбираю как подключать провайдеры. В серверных компонентах нет редакса. А в клиентских он работает без нюансов.

[@nazamosk7728]

@@mishanep Спасибо за ответ. А это не будет проблемой ведь большенство компонентов будет клиентскими

[@en_kratia]

Кто-нибудь знает, что лучше изучать джуниору: react query или rtk query? (прошу прощения за оффтоп)

[@victormog]

Redux для начала

[@user-888azim-97]

Михаил, а можно что-нибудь про gatsby пожалуйста? почти next

[@NeoCoding]

так это вообще другое) это же headless типа strapi

[@victormog]

Мой английский хромает, или на офф.сайте ничего про объект, как источник изображений, не написали?..

[@mishanep]

Я тоже не видел. Обнаружил империческим путем.

[@NeoCoding]

@@mishanep это кстати одно из открытий для меня в виде

[@t0pc0der]

@@mishanep эмпирическим, извините

[@NikOroferov]

Комментарий приемлемой длины в благодарность Михаилу

[@ИгорьНово]

😅😅😅

[@IT-Svyatoslav]

Благодарю Михаил! Вы нам Очень помогаете!

[@pink-doublethink]

Благодарен за хороший ролик за Имадж. В своё время всё это сам изучал через документацию и код библиотеки.

[@ВикторияВорона-х5ф]

Огонь!) Спасибо, ждём продолжения!)

[@nickolaizein7465]

А изначально картинка в каком формате лежит ? И она должна быть достаточно в большом разрешении чтоб оптимизация работала ?

[@mishanep]

В разных форматах у меня оригинальные картинки. Размер зависит от вариантов использования.

[@user-og13]

Добрый день, Михаил! Спасибо за ваш труд. Можете ли вы посвятить один из следующих уроков сборке проекта NextJS с настройкой webpack и ssr и deploy ?

[@mishanep]

Здравствуйте. До сих пор пользовался только стандартными настройками некста. Поэтому видео по нюансам сборки не планирую.

[@AlekseyKovshov-n5h]

михаил, к вам вопрос такой. А как вы используете тег picture и source для картинок, под разные размеры экрана. Вы используете или может быть в этом нет никакого смысла? Может вы знаете как picture и source совместно работает с компонентом Image от next?

[@mishanep]

У тега img есть стандартный проп srcset, который, по сути, заменяет собой пачку тегов source. При этом нет нужды указывать разный формат. На примере из видео в ссылке везде идёт расширение jpeg, но по факту сервер отдает avif. Я на старых браузерах не тестировал, но полагаю сервер им не пошлет формат, который они не поддерживают.

[@AlekseyKovshov-n5h]

​@@mishanep просто такая проблемка, что Image не имеет srcSet. Вместо этого у него deviceSizes. Знаете что-нибудь об этом? Просто в видео видел, жаль, что не рассказали

[@functiondead4841]

Михаил, будет ли платный курс по next 13? Заранее спасибо. Надеюсь на ваш ответ😊

[@mishanep]

Со временем. Может быть в следующем году.

[@functiondead4841]

@@mishanep ну впринципе до следующего года не так долго)