Словил флэшбэки, как мы писали подобный компонент, но сами) Михаил, спасибо за обзорные ролики по Нексту! Я хоть на нем и не пишу, но смотрю, впитываю на будущее) Пытаюсь убедить бизнес перейти на него с самопального SSR. Уже почти смог)
Отличный материал и подача! Спасибо!) По картинкам хорошо бы ещё уточнить: 1. Если WebP не поддерживает браузер, то отдаст оригинал. При этом, если был оригинал WebP, то сконвертирует в JPG, что плохо, так как теряет альфа-канал. Держать все с прозрачностью в PNG тяжело по размеру. Не нашел конфиг, чтобы изменить такое поведение, кажется, захардкодили, судя по исходникам. 2. По sizes всё-таки подробнее рассказать, как оптимизирует, когда картинка не на весь экран, и как он работает с ретинами. 3. Кэширование нарезки превью. По умолчанию очень маленький кэш на время, а для больших картинок нужно держать огромный оригинал, что, соответственно, давит на CPU. В перспективе было бы здорово, если добавишь материалы продвинутого уровня, например: оптимизация под Lighthouse, тестирование, логирование браузерных ошибок, ISR на запрос от CMS, сборка в Docker-образ, мониторинг продакшн и т.д. =)
Если не сложно, сделайте, пожалуйста, видео по актуальной локализации сайта в next js 13 - тк судя по всему, вариантов сделать это сейчас появилось много и все они очень различаются. Если добавите локализацию и рутов - вообще было бы супер
Михаил, спасибо за Ваши уроки, благодаря Вам вчера получил первый офер!!)) Пожалуйста, расскажите в Вашем новом видео о том, как работать с Firebase в Нексте! Буду очень благодарен!
Михаил здравствуйте! Вы знаете как происходит процесс получения оптимизированной картинки? Этот механизм внутри библиотек некста иди некст отправляет картинку в сторонний сервис? Мне недавно главный девопс сказал не оптимизировать картинки, так как нечего тут трафик гонять лишний раз в Германию, он имел в виду что сервис который якобы оптимизирует картинки для некста наверняка находятся в Европе и что проще оставить картинку в изначальном в виде, зато трафика больше не станет, хочу понять насколько истинно такое суждение 🤔
Михаил, здравствуйте! Спасибо за полезное видео. У меня возник вопрос по поводу момента на 3:55, где Next.js рекомендует указывать размеры изображений для предотвращения 'дёрганий' на странице. Как быть в случае адаптивного дизайна? Если я разрабатываю 'Desktop First', то размеры, например, 500x500 понятны. Но что делать, если экран у пользователя 992px или меньше? Как в этом случае быть с данными размерами? Если это уже описано в документации то я не нашел))))
по поводу атрибута 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 не оптимизируются некстом
спасибо за видосик. как раз работал с новыми картинками только что. там кстати как я понял, если нужен именно респонсив-вариант, чтобы картинки адекватно изменялись при изменении размеров экрана, то именно теперь всё на fill завязано, а не как раньше layout="responsive". В итоге, пришлось убирать размеры из Image, ставить fill, а размеры делать через css. На мой взгляд удобнее было как раньше указал размеры, и поставил layout responsive. чтобы всё автоматом работало. Если не делать обёртку и указать размеры то надо возится с sizes и прописывать адаптивы, но это имхо путь тайлвинда, который противоречит моим убеждениям, что код и стиль должны быть разнесены.
Надеюсь вы сможете помочь, почему при запуске в дев все изображаются корректно, но при билде и запуск на сервере и просмотр через домен часть изображений не отображаются?
на сколько стабилен generateStaticParams у меня с ним build не всегда работает, хотя делаю все как на видео, back end у меня на мангоДб, апи делаю на NextJs было у вас так ?
Оптимизация работает если делать deploy через Vercel. Если через сторонний сервис то есть вероятность что оптимизации не будет. В одном из интервью на канале Vercel об етом говорилось.
Нет. У меня есть видео про клиентские компоненты, где я разбираю как подключать провайдеры. В серверных компонентах нет редакса. А в клиентских он работает без нюансов.
михаил, к вам вопрос такой. А как вы используете тег picture и source для картинок, под разные размеры экрана. Вы используете или может быть в этом нет никакого смысла? Может вы знаете как picture и source совместно работает с компонентом Image от next?
У тега img есть стандартный проп srcset, который, по сути, заменяет собой пачку тегов source. При этом нет нужды указывать разный формат. На примере из видео в ссылке везде идёт расширение jpeg, но по факту сервер отдает avif. Я на старых браузерах не тестировал, но полагаю сервер им не пошлет формат, который они не поддерживают.
@@mishanep просто такая проблемка, что Image не имеет srcSet. Вместо этого у него deviceSizes. Знаете что-нибудь об этом? Просто в видео видел, жаль, что не рассказали
Комментарий приемлемой длины в благодарность Михаилу
😅😅😅
Словил флэшбэки, как мы писали подобный компонент, но сами) Михаил, спасибо за обзорные ролики по Нексту! Я хоть на нем и не пишу, но смотрю, впитываю на будущее) Пытаюсь убедить бизнес перейти на него с самопального SSR. Уже почти смог)
Благодарю Михаил! Вы нам Очень помогаете!
Классный функционал! Очень удобно, конечно, что такая оптимизация теперь не требует много усилий от тебя.
Благодарен за хороший ролик за Имадж. В своё время всё это сам изучал через документацию и код библиотеки.
Отличный материал и подача! Спасибо!)
По картинкам хорошо бы ещё уточнить:
1. Если WebP не поддерживает браузер, то отдаст оригинал. При этом, если был оригинал WebP, то сконвертирует в JPG, что плохо, так как теряет альфа-канал. Держать все с прозрачностью в PNG тяжело по размеру. Не нашел конфиг, чтобы изменить такое поведение, кажется, захардкодили, судя по исходникам.
2. По sizes всё-таки подробнее рассказать, как оптимизирует, когда картинка не на весь экран, и как он работает с ретинами.
3. Кэширование нарезки превью. По умолчанию очень маленький кэш на время, а для больших картинок нужно держать огромный оригинал, что, соответственно, давит на CPU.
В перспективе было бы здорово, если добавишь материалы продвинутого уровня, например: оптимизация под Lighthouse, тестирование, логирование браузерных ошибок, ISR на запрос от CMS, сборка в Docker-образ, мониторинг продакшн и т.д. =)
Спасибо! Ещё про параллельные роуты и перехватывающие роуты интересно было бы послушать в твоём исполнении)
Огонь!) Спасибо, ждём продолжения!)
Если не сложно, сделайте, пожалуйста, видео по актуальной локализации сайта в next js 13 - тк судя по всему, вариантов сделать это сейчас появилось много и все они очень различаются. Если добавите локализацию и рутов - вообще было бы супер
Михаил, спасибо за Ваши уроки, благодаря Вам вчера получил первый офер!!))
Пожалуйста, расскажите в Вашем новом видео о том, как работать с Firebase в Нексте! Буду очень благодарен!
Спасибо за уроки по next13. Подскажите а будет ли в ближайшее время урок по интернационализации ?
Здравствуйте.
По интернационализации пока не планировал.
@@mishanep очень жаль, было бы интересно посмотреть, там как раз какие-то изменения в next
Михаил здравствуйте! Вы знаете как происходит процесс получения оптимизированной картинки? Этот механизм внутри библиотек некста иди некст отправляет картинку в сторонний сервис? Мне недавно главный девопс сказал не оптимизировать картинки, так как нечего тут трафик гонять лишний раз в Германию, он имел в виду что сервис который якобы оптимизирует картинки для некста наверняка находятся в Европе и что проще оставить картинку в изначальном в виде, зато трафика больше не станет, хочу понять насколько истинно такое суждение 🤔
это бред
Михаил, здравствуйте! Спасибо за полезное видео.
У меня возник вопрос по поводу момента на 3:55, где Next.js рекомендует указывать размеры изображений для предотвращения 'дёрганий' на странице.
Как быть в случае адаптивного дизайна? Если я разрабатываю 'Desktop First', то размеры, например, 500x500 понятны.
Но что делать, если экран у пользователя 992px или меньше? Как в этом случае быть с данными размерами?
Если это уже описано в документации то я не нашел))))
когда можно будет купить курс nextjs ?
Мой английский хромает, или на офф.сайте ничего про объект, как источник изображений, не написали?..
Я тоже не видел. Обнаружил империческим путем.
@@mishanep это кстати одно из открытий для меня в виде
@@mishanep эмпирическим, извините
Подскажите, пожалуйста, как отключить минификацию html в dev-режиме next js?
Спасибо за видео
Спасибо за видео! Вопрос: за счет чего работатает priority? в ущерб чему?
C есть одна проблема. К сожалению, он не предназначен для генерации статических сайтов (SSG). Вот почему в Gatsby смогли сделать, а тут всё никак?
Спасибо огромное!
по поводу атрибута 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 не оптимизируются некстом
спасибо за видосик. как раз работал с новыми картинками только что. там кстати как я понял, если нужен именно респонсив-вариант, чтобы картинки адекватно изменялись при изменении размеров экрана, то именно теперь всё на fill завязано, а не как раньше layout="responsive". В итоге, пришлось убирать размеры из Image, ставить fill, а размеры делать через css. На мой взгляд удобнее было как раньше указал размеры, и поставил layout responsive. чтобы всё автоматом работало. Если не делать обёртку и указать размеры то надо возится с sizes и прописывать адаптивы, но это имхо путь тайлвинда, который противоречит моим убеждениям, что код и стиль должны быть разнесены.
Подскажите пожалуйста плагин, для отображения размера импортов как у автора, на Php storme
Надеюсь вы сможете помочь, почему при запуске в дев все изображаются корректно, но при билде и запуск на сервере и просмотр через домен часть изображений не отображаются?
на сколько стабилен generateStaticParams у меня с ним build не всегда работает, хотя делаю все как на видео, back end у меня на мангоДб, апи делаю на NextJs
было у вас так ?
Добрый день, Михаил! Спасибо за ваш труд. Можете ли вы посвятить один из следующих уроков сборке проекта NextJS с настройкой webpack и ssr и deploy ?
Здравствуйте.
До сих пор пользовался только стандартными настройками некста. Поэтому видео по нюансам сборки не планирую.
Михаил, извиняюсь а у вас есть курс по next js ??
Пока только то, что на Ютуб.
Оптимизация работает если делать deploy через Vercel. Если через сторонний сервис то есть вероятность что оптимизации не будет. В одном из интервью на канале Vercel об етом говорилось.
Подскажите плиз - для картинок мне часто надо width 100%, height 100%, object-fit cover - что я должен для этого в компоненте image прописать тогда?
По описанию похоже на fill. Только родителю position relative надо задать.
Михаил, будет ли платный курс по next 13? Заранее спасибо. Надеюсь на ваш ответ😊
Со временем. Может быть в следующем году.
@@mishanep ну впринципе до следующего года не так долго)
Михаил, подскажи пожалуйста, какую библиотеку вы используете для всплывающей анимации на своем новом проекта в next js?
Framer motion. У меня есть цикл видео по ней.
хотелось бы увидеть видео про PWA на nextjs
Здраствуйте. Будет ли видео как использовать редакс в некст приложение?
Нет. У меня есть видео про клиентские компоненты, где я разбираю как подключать провайдеры. В серверных компонентах нет редакса. А в клиентских он работает без нюансов.
@@mishanep Спасибо за ответ. А это не будет проблемой ведь большенство компонентов будет клиентскими
А изначально картинка в каком формате лежит ? И она должна быть достаточно в большом разрешении чтоб оптимизация работала ?
В разных форматах у меня оригинальные картинки. Размер зависит от вариантов использования.
михаил, к вам вопрос такой. А как вы используете тег picture и source для картинок, под разные размеры экрана. Вы используете или может быть в этом нет никакого смысла? Может вы знаете как picture и source совместно работает с компонентом Image от next?
У тега img есть стандартный проп srcset, который, по сути, заменяет собой пачку тегов source. При этом нет нужды указывать разный формат. На примере из видео в ссылке везде идёт расширение jpeg, но по факту сервер отдает avif. Я на старых браузерах не тестировал, но полагаю сервер им не пошлет формат, который они не поддерживают.
@@mishanep просто такая проблемка, что Image не имеет srcSet. Вместо этого у него deviceSizes. Знаете что-нибудь об этом? Просто в видео видел, жаль, что не рассказали
Кто-нибудь знает, что лучше изучать джуниору: react query или rtk query? (прошу прощения за оффтоп)
Redux для начала