I never saw such a detailed video like this... this one should be put in the next.js docs 👍👍
@BrunoAntunesPT
3 жыл бұрын
Thank you soooo much 😍😍😍😍🙏🙏🙏 Trust me, your words put a big smile on my face 😍 thank you so much!! 😊😀
@danivicario
2 жыл бұрын
I really like Bruno explaining. Very detailed and sounds like a very sensitive man. Many thanks for all the effort!
@trentcox9239
3 жыл бұрын
As always mate, bloody fantastic video. Informative, well paced and easy to follow along. Its a breath of fresh air to finally have someone not only teach something, but is able to know what secondary/tertiary aspects of the subject need to be covered as well to provide an all round understanding of the topic at hand. Love ya work.
@BrunoAntunesPT
3 жыл бұрын
Thank you so much Trent 😀😍😍 A very very nice comment to start the year - you are amazing Trent 😀 Preparing a video is sometimes a very lengthy process - thinking about all the possible use cases and possible questions you all may have 😊 comments like yours helps me (a lot) keeping the focus on what I'm doing 😍 thank you, thank you very much my friend!!
@techjandro
2 жыл бұрын
Okkkk this is one of the most useful and detailed videos I’ve seen ever! Thanks a lot. Also you are so good and calm explaining that is so joyful lol
@developersjs1205
3 жыл бұрын
I never saw such a detailed video like this. I like your videos❤❤
@BrunoAntunesPT
3 жыл бұрын
Thank you very much ❤️
@ashatron656
3 жыл бұрын
I'm an experienced Next.js user, I've watched a lot of videos on the image component, and this is the only one that truly explains it in detail. The documentation for the image component are not great either. Great work! Thanks! 👍
@BrunoAntunesPT
3 жыл бұрын
😍😍😍😍 This comment means a lot to me ❤️ thank you soo much for your incredible words 😀 this is pure motivation to keep creating videos 😊😊😊
@ashatron656
3 жыл бұрын
@@BrunoAntunesPT very very welcome! You earned a sub, v good content! Thanks! 👍
@BrunoAntunesPT
3 жыл бұрын
Thank you, thank you my friend 😀😀😀
@alexalexx3512
2 жыл бұрын
I know I'm a bit too late but I just wanted to say that this was the most relaxing and interesting video about programming I've ever seen.
@BrunoAntunesPT
2 жыл бұрын
Thank you very much Alex 😍 never late to read messages like this one ❤️
@hierotsu
2 жыл бұрын
With this content quality, I had to subscribe right away! Thanks a lot and bravo!
@ahmedumermughalradiantscho2870
2 жыл бұрын
28min ran out like a moment and here I am at the end of the video... Very impressive very simple and easy to understand. Good work Bruno! :)
@BrunoAntunesPT
2 жыл бұрын
Great to hear!
@programmer4047
3 жыл бұрын
I was waiting for this video for so long
@BrunoAntunesPT
3 жыл бұрын
😀😀😀 It took me quite a while to get this one done 😅😅
@balajibobby8530
3 жыл бұрын
Woahh same ... Thanks a lot Bruno
@BrunoAntunesPT
3 жыл бұрын
I'm very sorry for the delay my friends 😔😔 this video took me quite a while, but it also included some conversations with the nextjs team (regarding sizes property) and my first ever pull request to nextjs that saves us all (and our clients) quite a few Kb downloading images every time 😀😀😅😅
@programmer4047
3 жыл бұрын
@@BrunoAntunesPT Can We Use sizes attribute in Next.js image component
@BrunoAntunesPT
3 жыл бұрын
You can (and should) use it for every single image that is not 100% of your viewport 😀 That way your browser is able to download the "perfect" image size 😀 PS - The syntax is exactly the same I showed with the "normal" img tag. In reality nextjs is just passing that property (sizes) to the "img" without changing it. If you don't provide sizes property, nextjs is using by default 100vw.
@khanfaysal993
2 жыл бұрын
Excellent. Speaking from Bangladesh as a frontend developer.
@BrunoAntunesPT
2 жыл бұрын
Thank you 😍
@benevans1377
3 жыл бұрын
Another thing to help with layout shifts is implementing things called skeletons (not the spooky kind) material-ui has a basic form of skeleton, which is convenient for react but also helps to prevent cls from fetching api data which will take longer than an img, loved the video, will definitely be using this to improve UX
@BrunoAntunesPT
3 жыл бұрын
I love skeletons as well - just to be clear, I mean the UI ones ahahah 😀😀😀 The platform we are now using (KZitem) uses skeletons as well for the same reason (at least I'm assuming that... I don't work at KZitem, so I can only make assumptions...) 😀😀 I'm very very happy you enjoyed the video Ben =D If you have any question/suggestion, please do let me know 😀
@valentoMundrov
Жыл бұрын
well done and many thanks for the detailed videos over nextjs tech. extremeley helpfull! 👏👏👏Looking forward for more of these - NextJS API, edge-functions... great tech. I'm particulary interested in serving multiple domains from a single NextJS repo. Though my skills ain't enough I'm afraid. So I expect help from savvy guys like you, thank you again!
@iqbal5942
3 жыл бұрын
your teaching style really amazing 🥰
@BrunoAntunesPT
3 жыл бұрын
Thank you 😍
@tech3425
Жыл бұрын
Wow. I was always confused by the srcset attribute. Really good video
@BrunoAntunesPT
Жыл бұрын
Glad you liked it
@catorials444
3 жыл бұрын
No one can dislike this guy
@BrunoAntunesPT
3 жыл бұрын
I can hate myself from time to time, so I'm sure lots of people dislike me 🤣🤣🤣🤣
@eelguneezmemmedov1671
2 жыл бұрын
Thank u it was great video and experience to have watching you .Wish you best!
@BrunoAntunesPT
2 жыл бұрын
I really appreciate your words. Thank you very much 😍
@sidd24100
2 жыл бұрын
very nice and detailed. hard to find such videos. thank you v much!!
@BrunoAntunesPT
2 жыл бұрын
Thank you very much 😍
@MatthewQuisenberry
Жыл бұрын
Thank you so much for this! Great video! Answered ALL my questions.
@cauadasilvachagasdossantos1866
3 жыл бұрын
Muitas das minhas dúvidas com Next.js foram resolvidas com os vídeos desse canal. Nem sei o motivo de eu ainda perder tempo procurando exemplos com Google. Muito obrigado pelo vídeo, Bruno. Muitíssimo detalhado (e engraçado também hehe).
@BrunoAntunesPT
3 жыл бұрын
Muito muito obrigado meu amigo. Fico muito feliz de voce ter gostado dos videos do canal =) Um grande abraco para voce. Se tiver sugestao para novos videos, por favor me diga :)
@cauadasilvachagasdossantos1866
3 жыл бұрын
@@BrunoAntunesPT Para o Next.js: GraphQL, Headless CMS (Ex: Strapi, Prismic, Cosmic) e NextAuth
@anginharutyunyan5130
Жыл бұрын
This video is more than great. Thank you so much Bruno ❤
@raygan3
2 жыл бұрын
You are creating the beat next.js videos on the whole KZitem. If you don’t have any idea for next video you can create tutorial for next 12 middleware and next-auth package
@felipemattioli4130
2 жыл бұрын
I just wanna thank you for this incredible video! It helps a lot dealing with next image. I was so confused just trying put a background image using image in nextjs with another layout lib and with these tips I finally did what I was looking for. Thanks so much man!
@mitchellduhe
3 жыл бұрын
I learned more than I bargained for. Thanks! 👍
@BrunoAntunesPT
3 жыл бұрын
Thank you 😍
@timurc1111
3 жыл бұрын
Examples you are demonstrating have reasonable performance since all your images are 100vw. In real world responsive layouts images would have various view port width, depending on the breakpoint condition, and it would be hell of a job to provide for each image accurate size attribute. Best too look into alternative react image libraries that do size attribute calculation (at least for the lazy loaded images) or make a custom image component
@BrunoAntunesPT
3 жыл бұрын
You can look and use alternative libraries, they are also amazing ❤️ This video is only about the nextjs image component that comes built in with nextjs. I have been using it in very complex layouts and I been very happy with it. The sizes property is something I can 100% understand your feelings 😊 hopefully in the future the nextjs team will be able to help us even more 😉😉
@shkrmkr
3 жыл бұрын
Please make a paid course on udemy or something. You are a talented teacher/speaker 😍😍
@BrunoAntunesPT
3 жыл бұрын
Amazing words my friend 😍😍 thank you very very much 😀😀
@azam920
2 жыл бұрын
Very detailed video 🔥🔥🔥 thanks awesome 😎
@BrunoAntunesPT
2 жыл бұрын
Thank you very much 🙂🙂
@amguruprasath8037
3 жыл бұрын
Great Explanation
@BrunoAntunesPT
3 жыл бұрын
Thank you 😀🙏
@ilknurultanr1448
3 жыл бұрын
i loved your energy 💐 i think this is a great video on next/image
@BrunoAntunesPT
3 жыл бұрын
Thank you very much for your words 😊😊 I'm happy you enjoyed the video 😀😀
@firojsiddiki2750
2 жыл бұрын
object position is awesome.
@BrunoAntunesPT
2 жыл бұрын
I agree with you 🙂
@TheAsher817
2 жыл бұрын
Thank you very much Bruno. very well explained
@sergiob3698
3 жыл бұрын
Hi Bruno, very good explanations about the component and its use cases. Thank you one more time.
@BrunoAntunesPT
3 жыл бұрын
Thank you very much Sergio 😀😀
@pdgago.ballester
2 жыл бұрын
Excelent even for spanish-speaking developers!
@BrunoAntunesPT
2 жыл бұрын
Very happy to read that 🙂
@pdgago.ballester
2 жыл бұрын
@@BrunoAntunesPT can you expain me what is nextjs.org/docs/api-reference/next/image#image-sizes for? It is still important in the current version?
@BrunoAntunesPT
2 жыл бұрын
@@pdgago.ballester most often than not you don't need to change that - I don't remember changing that in the last 6/9 months 🙂
@fhkodama
2 жыл бұрын
Great video, Bruno! Thanks
@sohailurrahman4187
2 жыл бұрын
A very detailed video. Thank you.
@parrot785
2 жыл бұрын
Thank you! This was useful!
@BrunoAntunesPT
2 жыл бұрын
Awesome 🎉
@Commondore
2 жыл бұрын
Thanks for the video Bruno
@BrunoAntunesPT
2 жыл бұрын
Thank you 🤗
@thambimoirangthem4499
Жыл бұрын
superb, very well details explained. nice
@viniciuscardoso5271
Жыл бұрын
very polish English, thanks Bruno
@ismailelayade9402
3 жыл бұрын
Thank you, Bruno 🙏
@BrunoAntunesPT
3 жыл бұрын
Thank you Ismail 😀😀
@prateekshawebdesign8377
7 ай бұрын
Awesome video... good technical info.
@lottylone7557
3 жыл бұрын
you deserve a like
@BrunoAntunesPT
3 жыл бұрын
Thank you 😍
@dickson710
2 жыл бұрын
bro, you did a really good job. Crystal clear without any BS. Subscribed. Looking forward to your next video. Keep it up!
@BrunoAntunesPT
2 жыл бұрын
Thank you very much James 😍
@nongbriteenapong7310
Жыл бұрын
It really help me on my job
@ghassanclassic7689
3 жыл бұрын
Thank you bruno 🙏 i hopp you make a tutorial about the best rich text editor to integrate with next js 😊
@BrunoAntunesPT
3 жыл бұрын
Thank you mate 😊 what issues do you usually face with the rich text editors that exist for react? Knowing that helps to focus people attention in those issues and help fixing them 😊
@sahlabdelrhman9931
3 жыл бұрын
Thanks for this great video
@BrunoAntunesPT
3 жыл бұрын
Thank you for watching it 😍
@edpalmeida
2 жыл бұрын
Grande Bruno, explicação excelente. Parabéns! Obrigado
@BrunoAntunesPT
2 жыл бұрын
Obrigado :)
@pcintra1
3 жыл бұрын
Excelente explicação Bruno, parabéns e muito obrigado por compartilhar!
@BrunoAntunesPT
3 жыл бұрын
Muito obrigado Paulo 😍😍
@juankyZS444
3 жыл бұрын
Thanks for the video! very clear and easy to understand. New sub here :)
@BrunoAntunesPT
3 жыл бұрын
Thank you 😍😍
@LinhLinhBD
2 жыл бұрын
objectFit="contain" exactly what Im looking for
@cats_revenge
2 жыл бұрын
You should create udemy tutorials, I would definitely buy. Great video, thank you.
@BrunoAntunesPT
2 жыл бұрын
Thank you Ivan 🙂 maybe one day 🤗😉
@aahnafiya
3 жыл бұрын
very useful... anyway love your accent 😎
@BrunoAntunesPT
3 жыл бұрын
Ahah thank you very much my friend ❤️❤️
@valeriandigital7884
3 жыл бұрын
Awesome video, thank you!!!
@BrunoAntunesPT
3 жыл бұрын
Thank you Valerian 😀😀
@webdev723
2 жыл бұрын
Thanks you are good former.
@BrunoAntunesPT
2 жыл бұрын
Thank you 😍
@sergioterrazas97
3 жыл бұрын
Great video as usual!!!
@BrunoAntunesPT
3 жыл бұрын
Glad you enjoyed it Sergio! Thank you =D
@TrolerGaming
Жыл бұрын
Thanks for the video.
@jonasgedrat658
3 жыл бұрын
Show Bruno, acompanhando teus vídeos, tá falando baixinho pra não acordar o bebe? hehe, abração amigo, parabéns.
@BrunoAntunesPT
3 жыл бұрын
Muito obrigado Jonas 😀😀 Está muito baixo o som?
@nasereddinebekkal5379
3 жыл бұрын
Thank you 🙏💪
@BrunoAntunesPT
3 жыл бұрын
Thank you Nasereddine 😍
@sabirahmed6191
3 жыл бұрын
One drawback I've noticed using this component is, that the browser does not seem to cache the image. Even though the original image's CachePolicy has been set.
@BrunoAntunesPT
3 жыл бұрын
Hello Sabir, I'm not 100% sure, but I think you are referring to this issue: github.com/vercel/next.js/issues/19914 If that's the case, we have to wait until this one is implemented :)
@malikgenius4u
3 жыл бұрын
You are a star Bruno, loved to the way you explain with simple examples, i heard about new Image option on next.js but today fully understood how life savior this could be for the developer who has to manage app with bunch of images... i wish you would have explain what if the images are not local and from the third party for example AWS or DigitalOcean Spaces or cloudinary storage and next.js has to fetch them ??? will it still apply and how that performance will be boosted ???
@BrunoAntunesPT
3 жыл бұрын
Thank you very very much my friend =D I'm very happy you found the video helpful =) It's actually very easy to make it work with external images, as long as you have a public accessible URL for that image - the Next.js image component will be able to optimize that image! That means, you can optimize images from AWS S3 or azure blob storage and many other places =D You can do something like: ``` ``` Just keep in mind that if you are serving images from outside your own domain (like azure blob storage or amazon S3 buckets), you'll have to add that domain into your next.config.js - something like: ``` module.exports = { images: { domains: ['my-azure-blob-storage-id-or-aws-s3.azure-for-example.com'], }, } ``` That's all you need to do if you want to serve images from an "external source" =) The first time, Next.js will download the image from that external domain, but the second time you ask for that image with that same size/resolution and quality it will be served from cache =) If you are using cloudinary as you purposed, it's even better, the images don't even need to pass via the Next.js server to be optimized they will be served directly from cloudinary, via this loader: ``` module.exports = { images: { loader: 'cloudinary', path: 'example.com/myaccount/', }, } ``` You also have a similar loader for "imgix" and "akamai". For those 3, images are not even processed by your Next.js server :) I hope this answers your question, and sorry for this very long answer but it was hard to give all this info with less words =D
@kurtvanhal5337
3 жыл бұрын
Hi Bruno, Excellent video!! Explaining the srcSet and sizes first was very helpful in understanding the Image component. I'm currently trying to utilize the Image component for a gallery. I understand the benefits, however, I'm seeing loading times of seconds, where using a regular img would be much faster even though it's a bigger file. Is this only in development mode or is this standard behavior since NextJS needs to optimize the image on the server first. If so, how does this benefit the user experience? Kind regards & keep making these awesome videos
@BrunoAntunesPT
3 жыл бұрын
Thank you =) The first time an image loads, it will be slower, than serving an already optimized image as you may imagine :) BUT on that first request Next.js is saving that processed/optimized image, so subsequent requests to that image and that format will be very fast (as if you did it at build time). This is something the nextjs team did as a balance to have optimized images (for user benefits), and at the same time not make the build time take 3 hours in websites with 1000s of images. As everything in life, there's pros and cons with each solution :) As I said, they made the trade-off for websites with thousands of images...... In the past I saw websites taking hours to build because of image optimization (no joke) =D
@kurtvanhal5337
3 жыл бұрын
@@BrunoAntunesPT i can live with that 😉 thx for taking the time to respond!
@shahulhameed5540
2 жыл бұрын
can you please make a video of how can we deploy nextjs(SSR) app on GCP
@LucianoSoares85
3 жыл бұрын
Good as always.
@BrunoAntunesPT
3 жыл бұрын
Thank you Luciano 😀😀
@rohantongle155
3 жыл бұрын
Bruno can you please make video on integration of payment gateway in next js without using strap or node api
@BrunoAntunesPT
3 жыл бұрын
I don't do one of those systems for a bit. The last time I did something like that was using stripe like 3 or 4 years ago 😅😅 This was a playground repository: github.com/bmvantunes/stripe-3d-secure
@rohantongle155
3 жыл бұрын
@@BrunoAntunesPT thanks
@devstardude
3 жыл бұрын
Please make a video specially for SEO in Next.js
@BrunoAntunesPT
3 жыл бұрын
I'm not an SEO specialist 😅😅😅 What I can do is share some of the knowledge I got from working with some SEO specialists during my career 😀 but keep in mind, I'm not a SEO specialist myself 😅😅
3 жыл бұрын
Thanks
@BrunoAntunesPT
3 жыл бұрын
Thank you Jose! :)
@desmondamoako9854
Жыл бұрын
please do we have libraries to reduce the size of an image?
@juangabriel2559
3 жыл бұрын
Nice
@BrunoAntunesPT
3 жыл бұрын
Thank you 😊
@rohantongle155
3 жыл бұрын
Nice video👍
@BrunoAntunesPT
3 жыл бұрын
Thank you very much 🙏🙏😍😍
@rohantongle155
3 жыл бұрын
@@BrunoAntunesPT Always been waiting for your next js video Bruno
@BrunoAntunesPT
3 жыл бұрын
Thank you Rohan 😍😍 I really miss having more time to record videos. Recording videos is what I love the most lately 😍😍 sadly I have been very busy with other things in my life and I have not find the time to do my investigation and record, but I have to try to change that in 2021 😀😀
@aliceyenyen
2 жыл бұрын
thanks a lot!!!
@7iomka
2 жыл бұрын
Hi bro, after this video I'm subscribed) But I have one question. You demonstrated what if image has been inside a column of bootstrap row. But, what if I have a bootstrap container which has static max-widths on breakpoints, so for example on window width with 950px we have container with max-width: 768px. It's possible somehow to handle this case, to not load a bigger image just because viewport is 950px, but actually somehow support calculations relative to container?)
@criszamarco2186
3 жыл бұрын
Thanks a lot!
@BrunoAntunesPT
3 жыл бұрын
Thank you Cris 😀
@DanielJohannesson
3 жыл бұрын
Nice video! but the part where you are doing object-fit and objectPosition does not work for me... even if i put objectPosition="200px 350px" the image doesn't move an inch :o the "layout=fill" works! any idea why?
@BrunoAntunesPT
3 жыл бұрын
Thank you Daniel 😀 Both object fit and object position only work with layout fit 😊 You can't use those in any other layout 😔
@BrunoAntunesPT
3 жыл бұрын
In the next.js documentation they describe it at: nextjs.org/docs/api-reference/next/image In order to save you time searching the docs, what is written in the docs is: ``` objectFit The image fit when using layout="fill". objectPosition The image position when using layout="fill". ``` I hope you find it helpful Daniel 😊😊
@DanielJohannesson
3 жыл бұрын
@@BrunoAntunesPT I'm sorry! for some reason it didn't update in the browser properly :s It works like in your video! :D may I also take this opportunity to ask you if it is possible to somehow use this next/image like this to show different images you know so if the screen is small like on a phone, then I would love to have another picture that works good in portrait view if you understand what I mean :) do you know if this can be done somehow? or what would you have done to accomplish that? :) Thank you for taking the time to help me :)
@BrunoAntunesPT
3 жыл бұрын
That's awesome news 😀 Sadly the nextjs image component doesn't work with picture. I remember seeing a twitter in the past from I think guillermo rauch explaining the idea behind it, but sadly I can't find it 😔
@guillecirer3881
3 жыл бұрын
Hi Bruno, nice video. I have a question. I have tested the component and it works fine locally, but when I upload it to a server (not Vercel) I noticed something strange. While the weight of the images is optimised quite well, the response time takes longer than a normal image. - Image with next/image component: Size: 42.8kB. Time 96ms. Waiting (TTFB) 79.8ms - Image with loaded directly from original src. Size: 69kB. Time 25 ms. Waiting (TTFB) 19ms With larger image the impact is bigger. Any idea? Thanks you!
@BrunoAntunesPT
3 жыл бұрын
Thank you 😊 The nextjs image component runs at runtime, not build time. That means, The first time we request an image it will be a bit slower than serving an image fron disk. But the next time we request that same image, should be pretty fast, like serving from disk 😊 If you are on a platform where the file system is not persistent, then yes, it will be always slow, because you'll never have the image cached
@narcissisticnarcissus4956
3 жыл бұрын
Like you said this will not work with Github Pages or Netlify. I learned that the hard way.
@BrunoAntunesPT
3 жыл бұрын
I'm very sad to hear that my friend ;( To be 100% fair, I honestly don't use netlify for quite a while, but.... if they do "next export", sadly it will not work over there :(
@deyvidantonioarauzcruz7715
2 жыл бұрын
How can i install and use bootstrap in nextjs?
@oallanmendes
3 жыл бұрын
Ótimo conteúdo Bruno! Estou usando o NextJS para aprender e estou com dificuldade para implementar um carrossel usando o componente Image. Você sabe se é possível? E uma curiosidade sobre você, português ou brasileiro?
@BrunoAntunesPT
3 жыл бұрын
Muito obrigado Allan, Neste momento nao tenho nada que te consiga enviar com um carrossel, mas e' possivel sim 😊 Eu dou a resposta sobre a minha nacionalidade no meu ultimo video 🤣🤣 kzitem.info/news/bejne/u31t2YCYgmqcf20 Mas caso nao queiras ver um video sobre Next.js API Routes, eu sou Portugues de Lisboa 😍 Neste momento estou a viver em Londres, no Reino Unido 😊 PS - Desculpa a falta de pontuacao, estou num teclado ingles 😃
@valse82
3 жыл бұрын
Hi and thanks for the video: in your opinion how this approach could be seo friendly? If you look at the page source code all the images source attribute is set to base64 placeholder 🤔 There isn't a noscript tag too and the curious thing is that this plugin was made together the chrome dev team as you said so... I think that the images will be indexable but... How? 😅
@BrunoAntunesPT
3 жыл бұрын
Thank you Marco 😀😀 Regarding SEO, I need to say before anything else that I'm NOT a SEO specialist, so take the rest of this comment with a grain of salt 😅😅😅😅😅 I understand and agree with your point specifically about the noscript - I did something very similar to this a few years ago, but I was using noscript for that exact reason... Today when I have a specific image that is important for my users, I use the preload and priority as I showed in the video. If you use preload and priority as eager, you'll see that by default, src and srcset are defined 😊 those images I'm 100% sure will be OK for SEO - happy to be corrected if not 😅😅 Regarding the images with loading to lazy, we need to scroll into them in order to have src and srcset, so yeah... Honestly I don't know how Google (and others) works on that regard 😀 it's something I can investigate, because honestly I don't know the answer 😀 now I'm very very curious. I think my first day after holidays I have something to check out 😅😅😅😅 if you have more info even if it looks simple, I would love to hear in order to learn a bit more about SEO ❤️❤️😀
@ericvrp2
3 жыл бұрын
Does that mean that if I know an image will takeup roughly a third of the screen width I can do
@BrunoAntunesPT
3 жыл бұрын
Exactly 😊 doing that in combination with the srcset attribute that nextjs already sets automatically, will allow the browser to download the best possible image for those 33% of the screen, instead of doing the calculations for 100% of the screen (by default sizes="100vw", so I recommend any image that is not 100% of the viewport that you set sizes yourself in order to have better results ) 😊
@Alex-gn3vm
3 жыл бұрын
Good health to you and thank you very much for such informative content!) There is one question. There is a self-written project using self-written JavaScript, jquery and third-party JS libraries. I set out to transfer the project to Next JS. I downloaded the scripts, connect - I found a lot of options, but none of the options helped to revive the scripts. The question is how to transfer old custom JS to a Next JS project? Thanks in advance for your reply!)
@BrunoAntunesPT
3 жыл бұрын
Thank you 😀 What do you mean by revive? Do you mean rewrite all those scripts in React without jquery or reuse them as they are without any changes? 😅 Depending on what you want to do, those 2 have very different solutions/answers 😊
@frutiboy1
3 жыл бұрын
So this doesn't work with for example github hosting just because the links and images are not generated at compile time? Sounds like it could be easily done! Unfortunately Vercel is not willing to make it work like that!?
@BrunoAntunesPT
3 жыл бұрын
At the moment it only works at runtime, yes. Vercel decided to keep builds fast to avoid the problems that exist with for example gatsby. I know some builds taking 10/20/30 minutes because of image optimization 😅😅 The only way to work statically is if you use for example, cloudinary - that way the image optimization is done in cloudinary servers at runtime 😊 But yeah... cloudinary after a while becomes a bit expensive for some use cases 😊 Maybe in the future vercel will give us a flag to decide between runtime and build time 😅 probably it will never happen, but I'm an optimistic person 😅😅😅
@oazzis4442
2 жыл бұрын
thx
@BrunoAntunesPT
2 жыл бұрын
Thank you my friend 😍
@bryansoebagijo4189
3 жыл бұрын
Really well explained video! i have a simple question tho, is it possible to show a loading indicator when the image is being loaded? (while lazy loading i mean). if it is, how can we do that? thank you :)
@BrunoAntunesPT
3 жыл бұрын
Thank you very much Bryan 😀😀😀 The answer is "no", but I read somewhere on twitter that they were planning something like that - I might be wrong because I tried to search for that tweet... And I can't find it 😅😅😅😅 PS - probably this shows more about my bad twitter skills than anything else 😂😂🤣🤣
@edwinnarvaez2791
3 жыл бұрын
god job Bruno ! 💪
@BrunoAntunesPT
3 жыл бұрын
Thank you very much Edwin =D I'm very happy you enjoyed the content of the video =D
@ragnsanfinnvalla1717
3 жыл бұрын
Fantastic video, Bruno! I am having a problem that I hope you may have encountered/solved. I have been using the image component with a set witdth and height for my images, and they work perfectly, 100/100 PageSpeed score. But recently I have added hero images to my website, which requires me (I think) to use layout="fill" and not set the width and height. The image component servces a srcSet with different sizes, but the file loaded for the hero image is always 1,2mb, compared to the 80-150kb of the regular width/height-set images. This has tanked the performance of the site (scores of 60-75 in PageSpeed) just from this one hero image. Have you encountered this problem, and if so, how did you resolve it? Again, fantastic video. Best regards
@BrunoAntunesPT
3 жыл бұрын
Thank you 😀 Yeah... Sadly the layout fill will sometimes create very big images in size 😔
@MrZiyak99
3 жыл бұрын
This would only work for a site hosted on Vercel correct
@BrunoAntunesPT
3 жыл бұрын
It works everywhere you can do "npm run build" and "next start" :) IF the platform you are deploying to forces you to "next export", then it will not work :)
@jonelmercado8745
3 жыл бұрын
What should I do if I want a completely different image for different sizes?
@BrunoAntunesPT
3 жыл бұрын
In that case the next js image component is not enough. You need a solution based on media queries 😊
@BrunoAntunesPT
3 жыл бұрын
In case you are using material-ui you have a built in media query hook there. If you are not using material you have other similar solutions available on npm 😊 material-ui.com/components/use-media-query/
@tuRistst
2 жыл бұрын
How to switch another image for desktop and mobile devices? For example on mobile I want to show "cat image" and for desktop show "dog image". Thx
@BrunoAntunesPT
2 жыл бұрын
That is not supported by the nextjs image component. Sadly, you'll have to implement it yourself if you need it
@tuRistst
2 жыл бұрын
@@BrunoAntunesPT ok, thx for the answer
@ehodges2004
3 жыл бұрын
Great video. It would be cool if you could cover using Cloudinary/Imgix with Next Image. Or would you use another solution?
@BrunoAntunesPT
3 жыл бұрын
Thank you 😀😀 Currently I save all my files in azure blob storage, just because it is very very very cheap with geo replication and does the job very well for my needs 😅😅 For some use cases I can completely see the benefits of a service like cloudinary with their cropping features, etc 😊 PS - I'm preparing a multi file upload video, where I'll be using cloudinary - they are the only service I found with a demo account, so people can follow my video without having to create an account which is amazing😀😀😀
@ehodges2004
3 жыл бұрын
@@BrunoAntunesPT Ok cool, thank you. I'll look at azure.
@BrunoAntunesPT
3 жыл бұрын
If you are not emotionally invested in any of the 3 big cloud providers yet, and you deploy to vercel or netlify, keep in mind that both vercel and netlify are built on top of aws, so probably using aws s3 gives you a little bit less latency (just a guess, I didn't test this 😅)
@ehodges2004
3 жыл бұрын
@@BrunoAntunesPT Ah interesting. I'll keep this in mind. I'm not invested in any of them. I like the free tier of Cloudinary and the options for manipulating images. I think I would need to use more storage to justify AWS at the moment, but it would be good to consider.
@BrunoAntunesPT
3 жыл бұрын
Cloudinary is very good, if you go with them I can guarantee you'll be happy 😊
@bradleygibbs8791
3 жыл бұрын
Thanks for the video, Bruno! I'm just starting to look at this, so, it was a very timely release for me! It seems kind of weird that Image Optimization only works with images that are available at build time, but, it doesn't work on images you upload to a running server given how easy they've made it to work with Next natively.... So, I have a photography site with an admin page that allows users to manipulate and upload photos to the site. I guess I have to use something like imgix or Cloudinary? If so, are there still advantages to using the Image component? Does it offer anything above and beyond what I can get directly from imgix?
@BrunoAntunesPT
3 жыл бұрын
Thank you 😊 the image component works at runtime, not at build time 😊 As long as you have your images publicly available via an url nextjs will work with them even from external services. So let's say, if your users upload photos, you normally save them into amazon s3, azure blob storage, Google cloud or the services you mentioned. In those cases because you have an url to the image, that image can be optimised at runtime, no need to be there at build time 😊 I'm doing that with azure blob storage for a very similar use case 😅😅 PS - Nextjs team has specific loaders for imgix, akamai and cloudinary PS2 - if you want to save those uploaded photos into the public folder of nextjs it will not work, but I would never recommend that to be honest 😊 PS3 - I have never used those services you mentioned, so I can't compare their performance... But if they don't set srcset in images, I'll be tempted to say you'll get better performance using nextjs image component, but take this with a grain of salt 😊😅
@bradleygibbs8791
3 жыл бұрын
@@BrunoAntunesPT Yes, you're absolutely right -- the Image component works at runtime, but NOT on images in the server's public folder that were not there at build time. There's a recent thread in Next's discussion thread on Github about uploading images to a Vercel-hosted site. People were surprised it wasn't working, but it states pretty clearly in the docs that it won't work. It does seem like a cleaner solution with fewer potential points of failure (imgix also requires images to be hosted on another service, such as S3, so, that's two more things that could go wrong). Out of curiosity, why is using images in Next's public folder something you'd never recommend?
@BrunoAntunesPT
3 жыл бұрын
I could use multiple theoretical reasons, but I will try to give 2 very simple and practical examples 😀 First: You deploy your app and need to have 2 servers (because of the load).... how do you synchronize the two public folders? You can use docker or similar technology it is true, but It's a harder problem to solve then if you are using amazon s3 or azure blob storage from day one to serve your images 😊 those two services (azure and aws) also have geographical replication of your images, so your images are always safe from any problem that might happen. They are also very fast and add zero load to your servers, so your servers can focus on serving what matters without using bandwidth for images 😊 Second example, even if you only have one server. Usually when I deploy I destroy everything that is on my server and deploy the new version as a completely clean slate. If you are keeping files on the public folder between deployments how do you do this? If you have the same file on git and on the server public folder... Which one wins? This becomes very complicated very fast... 😅😅😅 Real world example: nowadays with serverless (like vercel) we have a mix of example one and two... Multiple servers, and each request can be served actually by new servers and deployments. So keeping your files in your public folder is not practical (doable but much harder than having them outside) 😊 I hope I didn't went too technical and was able to show with simple examples 😀 PS - vercel is serverless and nextjs is made with vercel in mind 😊
@BrunoAntunesPT
3 жыл бұрын
PS2 - my recommendation of separating your images from the rest, is something I follow since I did c# back in the day, is not something I recommend for nextjs, nodejs or vercel specifically 😊
@igdev6095
2 жыл бұрын
How can I handle error image with nextjs? Like a fallback image, thanks u
@BrunoAntunesPT
2 жыл бұрын
Sadly there's nothing built in to handle errors (as far as I am aware)
@TryCatchDev
3 жыл бұрын
Amazing Component Next Image. How to use next image in next 9?
@BrunoAntunesPT
3 жыл бұрын
The image component is amazing 😀 The image component is a next 10 feature, sadly it is not available in next 9 If for some reason you can't update to next 10,you can have a look into a package called next-images (I think it's the best alternative) The package url: www.npmjs.com/package/next-images
@TryCatchDev
3 жыл бұрын
Thank you. I have built a web application using next js 9. but still under development. Does updating the version make the previous function not work sir?
@BrunoAntunesPT
3 жыл бұрын
@@TryCatchDev in the past 2/3 months I updated big applications at work. without any major problem 😊
Let me know if you face any major problems, I'm curious to know 😅😅
@jamesb1664
3 жыл бұрын
Amazing video! 💪🏻 Is there a solution to the next export issue, for example the 404 error when using next Image in AWS Amplify, or Netlify etc?
@BrunoAntunesPT
3 жыл бұрын
Thank you very much =D Short answer: Sadly, no. Longer answer: Next.js does the image optimization at runtime currently (this can change in the future.......... if I had to bet, I would bet that they will change that sooner or later)
@BrunoAntunesPT
3 жыл бұрын
I shouldn't have said they will change. I should have said that they will give us the option to optimize at runtime or buildtime 😅 Change is the wrong word 😅 it's already 1am here, so my brain is half asleep 🤣🤣
@haseebpervaiz6112
3 жыл бұрын
As you said its Easy .its Easy Or good In case of Getting it from Local Storage if we have dynamic locations from multiple server its looks Trash...
@BrunoAntunesPT
3 жыл бұрын
I'm curious... Why you say that? 😊 You can use it as easily with images from "outside" 😊 you just need to pass a domains in your next.config.js - nextjs.org/docs/basic-features/image-optimization#domains
@shehanfernando8566
3 жыл бұрын
Hi Bruno. This is very useful. Thank you very much. I've managed to successfully deploy my Nextjs app on to the Azure WebAPPs. Now Next/Image is not loading images (png) from public/images folder. Can you please help?
@BrunoAntunesPT
3 жыл бұрын
Thank you 😍 What's the error you are seeing?
@BrunoAntunesPT
3 жыл бұрын
Hello Shehan, I received a notification that you commented something, but sadly KZitem deleted it and I can't see it :( Can you repeat what you said?
@allex204
3 жыл бұрын
Thanks for the video Bruno. Is there support for converting to WebP images?
@BrunoAntunesPT
3 жыл бұрын
Thank you 😀😀 The nextjs component does it automatically depending on the browser you are using 😀 there's also references in the source code to "avif" (a new format even more "optimized" than webp). I'm expecting in the future that nextjs will also support/serve images in avif format 😀😀 Next.js source code AVIF reference: github.com/vercel/next.js/blob/5562daf7a160e62fd4f78eca257ba957ad64074c/packages/next/next-server/server/image-optimizer.ts#L17
@allex204
3 жыл бұрын
@@BrunoAntunesPT That's awesome. It is good to know because I'm planning to migrate my site from Gatsby to Next. Thanks for your response!
@BrunoAntunesPT
3 жыл бұрын
Honestly I'm also planning to move my blog from gatsby to nextjs 😊 That's probably the reason I have only done one blog post in all my life in that blog (yes I'm trying to lie to myself 😅😅😅)
@ericvrp2
3 жыл бұрын
The problem about NextJS being unable to unlink some images I also have when deploying a production build to an Azure Linux server.
@BrunoAntunesPT
3 жыл бұрын
Ohhh really? 🤔🤔 I use about 50% of the time windows and 50% fedora and genuinely thought it was something related with my windows machine specifically because it never happened on my fedora 😅😅 I was sooo sure about that that I honestly thought about editing that part out of the video. I'm glad I didn't 😅😅 that way I know I'm not alone 😅😅😅😅 If you can confirm that the message is the same, then tomorrow morning I can have a look into the nextjs repository and if no issue is already open for that I can open one 😊
@ericvrp2
3 жыл бұрын
@@BrunoAntunesPT Out of the 100 or so images it is often only one version of one image and sometimes only after a couple of hours. I saw it on my Windows development machine also but much less often. Maybe that is because there are not so any users locally. :-)
@BrunoAntunesPT
3 жыл бұрын
It makes sense =D Tomorrow morning (or during lunch time) I'll search the Next.js repository for a similar issue. If I don't find one I'll open one =)
@BrunoAntunesPT
3 жыл бұрын
I found an issue that also contains "our" error message, even though the issue itself mainly references a problem with safari =) The issue is: github.com/vercel/next.js/issues/19478
@BrunoAntunesPT
3 жыл бұрын
The specific comment: github.com/vercel/next.js/issues/19478#issuecomment-734790232
@rk_modi
3 жыл бұрын
how can we show different images on different screen sizes in nextjs image tag? is srcset attribute there in tag
@BrunoAntunesPT
3 жыл бұрын
Next.js (at least for now) doesn't allow different images per srcset You can still use some techniques to crop and adjust the image like I did with Miguel Oliveira's image, but having a complete different image that's not possible :(
@rk_modi
3 жыл бұрын
Can we use Image tag of next js in picture tag of html
@BrunoAntunesPT
3 жыл бұрын
I don't think so...
@diogoluis6179
3 жыл бұрын
Boas Bruno, reparei recentemente que o Next permite criar SPA's. Ou seja, é possível criar uma aplicação que serve uma pagina estática através do backend e fazer fetch no front end e ter as transições de pagina sem causar um reload. Isto é uma boa pratica? Ou existe algum down side deste tipo de arquitetura? Abraço.
@BrunoAntunesPT
3 жыл бұрын
Boas Diogo 😊 Sim, essa é a maneira que o nextjs funciona 😊 Dessa forma consegues ter o melhor dos dois mundos, rápido para o primeiro load, e com todos os benefícios que adoramos dos SPA 😊
@diogoluis6179
3 жыл бұрын
@@BrunoAntunesPT dude, eu tava mesmo a pensar nisso, é o melhor dos dois mundos, mas tava a achar que era bom demais ahah obrigado pela resposta, continuo a acompanhar-te. Abraço.
@BrunoAntunesPT
3 жыл бұрын
É excelente sim 😊 muito obrigado Diogo 😊
@moose43h
3 жыл бұрын
What about priority
@BrunoAntunesPT
3 жыл бұрын
I think I mentioned it during the video, but in case you missed it or I didn't mention it: priority When true, the image will be considered high priority and preload. Should only be used when the image is visible above the fold. Defaults to false. I hope this helps 😊
Пікірлер: 330