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