Next.js Image Component and Image Optimization + srcset and sizes explanation

[@tririfandani1876]

I never saw such a detailed video like this... this one should be put in the next.js docs 👍👍

[@BrunoAntunesPT]

Thank you soooo much 😍😍😍😍🙏🙏🙏 Trust me, your words put a big smile on my face 😍 thank you so much!! 😊😀

[@joerivde]

Holy cow mate, the world needs more people like you!

[@bdk9830]

The best explanation ever about Image Component of Next.js. Thank you a lot.

[@hierotsu]

With this content quality, I had to subscribe right away! Thanks a lot and bravo!

[@BrunoAntunesPT]

Next.js 11 new Image features in under 45 seconds: kzbin.info/www/bejne/eoG2hpihjsyNf7c I hope you enjoy the video 😀😀 As I promised in the video: Deployed examples: youtube-2020-dec-nextjs-image-component.vercel.app/ GitHub repository: github.com/bmvantunes/youtube-2020-dec-nextjs-image-component More links available in the video description :)

[@trentcox9239]

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]

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!!

[@danivicario]

I really like Bruno explaining. Very detailed and sounds like a very sensitive man. Many thanks for all the effort!

[@ashatron656]

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]

😍😍😍😍 This comment means a lot to me ❤️ thank you soo much for your incredible words 😀 this is pure motivation to keep creating videos 😊😊😊

[@ashatron656]

@@BrunoAntunesPT very very welcome! You earned a sub, v good content! Thanks! 👍

[@BrunoAntunesPT]

Thank you, thank you my friend 😀😀😀

[@deevoid]

I was struggling with the image sizes on chrome emulated views, but after this video it was clear that devicePixelRatio plays a major part in deciding which images to load. Thankyou Bruno. This was the most detailed explanation I have ever seen. 👌

[@BrunoAntunesPT]

Thank you 😍

[@nicolaspena4791]

Seriously, what a clear way of explaining, I love the simplicity with which you express yourself and teach your ideas!

[@BrunoAntunesPT]

Thank you very much for your words 🥰🥰

[@developersjs1205]

I never saw such a detailed video like this. I like your videos❤❤

[@BrunoAntunesPT]

Thank you very much ❤️

[@ahmedumermughalradiantscho2870]

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]

Great to hear!

[@techjandro]

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

[@morganedubus5742]

Thanks a lot Bruno for this video ! Thanks to you I now understand better how images work with Next JS. This helped me better than the big amount of tutorials I read on the internet.

[@BrunoAntunesPT]

Great to hear! Thank you very much =)

[@vitorcastilho9372]

The most perfect explanatory video on the subject!! Thanks for the class!

[@terrytas13]

I love your videos for the content and the excitement and enthusiasm you show in them. A teacher who is genuinely interested in teaching the topic really helps. Keep up the great work!

[@BrunoAntunesPT]

Thank you very much Terry 😍

[@benevans1377]

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]

I love skeletons as well - just to be clear, I mean the UI ones ahahah 😀😀😀 The platform we are now using (KZbin) uses skeletons as well for the same reason (at least I'm assuming that... I don't work at KZbin, 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 😀

[@alexalexx3512]

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]

Thank you very much Alex 😍 never late to read messages like this one ❤️

[@khanfaysal993]

Excellent. Speaking from Bangladesh as a frontend developer.

[@BrunoAntunesPT]

Thank you 😍

[@timurc1111]

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]

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 😉😉

[@felipemattioli4130]

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!

[@cauadasilvachagasdossantos1866]

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]

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]

@@BrunoAntunesPT ​ Para o Next.js: GraphQL, Headless CMS (Ex: Strapi, Prismic, Cosmic) e NextAuth

[@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!

[@cui.cui.]

Again thank you for your positive energy! so much detail in this vid this is great!

[@BrunoAntunesPT]

Thanks sooo much my friend 😍😍

[@tech3425]

Wow. I was always confused by the srcset attribute. Really good video

[@BrunoAntunesPT]

Glad you liked it

[@raygan3]

You are creating the beat next.js videos on the whole KZbin. If you don’t have any idea for next video you can create tutorial for next 12 middleware and next-auth package

[@iqbal5942]

your teaching style really amazing 🥰

[@BrunoAntunesPT]

Thank you 😍

[@azox_sudo]

first time i watch any of ur videos and u are amzing!

[@BrunoAntunesPT]

Thank you very much 🥳😍

[@ilknurultanr1448]

i loved your energy 💐 i think this is a great video on next/image

[@BrunoAntunesPT]

Thank you very much for your words 😊😊 I'm happy you enjoyed the video 😀😀

[@programmer4047]

I was waiting for this video for so long

[@BrunoAntunesPT]

😀😀😀 It took me quite a while to get this one done 😅😅

[@balajibobby8530]

Woahh same ... Thanks a lot Bruno

[@BrunoAntunesPT]

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]

@@BrunoAntunesPT Can We Use sizes attribute in Next.js image component

[@BrunoAntunesPT]

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.

[@mitchellduhe]

I learned more than I bargained for. Thanks! 👍

[@BrunoAntunesPT]

Thank you 😍

[@eelguneezmemmedov1671]

Thank u it was great video and experience to have watching you .Wish you best!

[@BrunoAntunesPT]

I really appreciate your words. Thank you very much 😍

[@MatthewQuisenberry]

Thank you so much for this! Great video! Answered ALL my questions.

[@anginharutyunyan5130]

This video is more than great. Thank you so much Bruno ❤

[@sergiob3698]

Hi Bruno, very good explanations about the component and its use cases. Thank you one more time.

[@BrunoAntunesPT]

Thank you very much Sergio 😀😀

[@guillecirer3881]

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]

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

[@sidd24100]

very nice and detailed. hard to find such videos. thank you v much!!

[@BrunoAntunesPT]

Thank you very much 😍

[@kurtvanhal5337]

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]

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]

@@BrunoAntunesPT i can live with that 😉 thx for taking the time to respond!

[@catorials444]

No one can dislike this guy

[@BrunoAntunesPT]

I can hate myself from time to time, so I'm sure lots of people dislike me 🤣🤣🤣🤣

[@Alex-gn3vm]

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]

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 😊

[@malikgenius4u]

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]

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

[@bryansoebagijo4189]

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]

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 😂😂🤣🤣

[@shkrmkr]

Please make a paid course on udemy or something. You are a talented teacher/speaker 😍😍

[@BrunoAntunesPT]

Amazing words my friend 😍😍 thank you very very much 😀😀

[@valse82]

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]

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 ❤️❤️😀

[@pdgago.ballester]

Excelent even for spanish-speaking developers!

[@BrunoAntunesPT]

Very happy to read that 🙂

[@pdgago.ballester]

@@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]

@@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 🙂

[@berkakgun7160]

I guess you live in Porto, the kitchen looks so similar with the one I had when I was living in Portugal !

[@BrunoAntunesPT]

I hope you loved to live in Portugal 😍😍😍 Porto is a lovely place!!! But actually this was recorded on my parents house during Christmas 😀 they live near Lisbon 😜😜

[@allex204]

Thanks for the video Bruno. Is there support for converting to WebP images?

[@BrunoAntunesPT]

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]

@@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]

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 😅😅😅)

[@bradleygibbs8791]

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]

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]

@@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]

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]

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 😊

[@ninemuses2620]

Awesome and elaborate explanation!😮😮😮

[@BrunoAntunesPT]

Nextjs launched today a preview of their "future" image component 🙂 in probably 6 months when that becomes the official version, this video will be out of date 😅

[@ragnsanfinnvalla1717]

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]

Thank you 😀 Yeah... Sadly the layout fill will sometimes create very big images in size 😔

[@oallanmendes]

Ó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]

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 🤣🤣 kzbin.info/www/bejne/kHiapH-Yfp2egpo 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 😃

[@hamed4451]

Look!! Who came back, Where are u bruno, I miss you bro ❤

[@BrunoAntunesPT]

I'm very happy to have found the time to record this video 😍😍❤️❤️ I loved making this video - hopefully I can find more time in 2021 for recording videos, I really miss recording a lot😀❤️❤️

[@mertcanatan1]

Very informative video again. Thank you so much!

[@BrunoAntunesPT]

Thank you very very much Mert =D Any suggestion for future videos? =D

[@mertcanatan1]

@@BrunoAntunesPT Actually I really wonder how files/images are uploaded, hosted and reused in real projects. A video about these would be very nice 🙂

[@BrunoAntunesPT]

I'm saving all my images in azure blob storage directly on user upload 😊 then I point my nextjs image component at those images to be optimized - you can also use other services - a lot of people use amazon s3 to store their static files. I also know about people using image specific services like imgix, cloudinary, etc 😊 The problem about making those type of videos, is that we have at least 5 or 6 different solutions and everybody is using a different one 😅😅😅 so making a video that makes sense to everyone is very very hard (I would not say impossible because I don't like the word, but.... 😅😅😅)

[@mertcanatan1]

@@BrunoAntunesPT Yeah, I think I got the point 😅 Thank you very much!

[@ehodges2004]

Great video. It would be cool if you could cover using Cloudinary/Imgix with Next Image. Or would you use another solution?

[@BrunoAntunesPT]

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]

@@BrunoAntunesPT Ok cool, thank you. I'll look at azure.

[@BrunoAntunesPT]

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]

@@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]

Cloudinary is very good, if you go with them I can guarantee you'll be happy 😊

[@azam920]

Very detailed video 🔥🔥🔥 thanks awesome 😎

[@BrunoAntunesPT]

Thank you very much 🙂🙂

[@thambimoirangthem4499]

superb, very well details explained. nice

[@7iomka]

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?)

[@ghassanclassic7689]

Thank you bruno 🙏 i hopp you make a tutorial about the best rich text editor to integrate with next js 😊

[@BrunoAntunesPT]

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 😊

[@firojsiddiki2750]

object position is awesome.

[@BrunoAntunesPT]

I agree with you 🙂

[@amguruprasath8037]

Great Explanation

[@BrunoAntunesPT]

Thank you 😀🙏

[@juankyZS444]

Thanks for the video! very clear and easy to understand. New sub here :)

[@BrunoAntunesPT]

Thank you 😍😍

[@jamesb1664]

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]

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]

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 🤣🤣

[@TheAsher817]

Thank you very much Bruno. very well explained

[@sohailurrahman4187]

A very detailed video. Thank you.

[@parrot785]

Thank you! This was useful!

[@BrunoAntunesPT]

Awesome 🎉

[@prateekshawebdesign8377]

Awesome video... good technical info.

[@fhkodama]

Great video, Bruno! Thanks

[@Commondore]

Thanks for the video Bruno

[@BrunoAntunesPT]

Thank you 🤗

[@sabirahmed6191]

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]

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 :)

[@nongbriteenapong7310]

It really help me on my job

[@ismailelayade9402]

Thank you, Bruno 🙏

[@BrunoAntunesPT]

Thank you Ismail 😀😀

[@LinhLinhBD]

objectFit="contain" exactly what Im looking for

[@jonasgedrat658]

Show Bruno, acompanhando teus vídeos, tá falando baixinho pra não acordar o bebe? hehe, abração amigo, parabéns.

[@BrunoAntunesPT]

Muito obrigado Jonas 😀😀 Está muito baixo o som?

[@shahulhameed5540]

can you please make a video of how can we deploy nextjs(SSR) app on GCP

[@azeynar]

great explanation, thank you !

[@sahlabdelrhman9931]

Thanks for this great video

[@BrunoAntunesPT]

Thank you for watching it 😍

[@rohantongle155]

Bruno can you please make video on integration of payment gateway in next js without using strap or node api

[@BrunoAntunesPT]

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]

@@BrunoAntunesPT thanks

[@viniciuscardoso5271]

very polish English, thanks Bruno

[@ericvrp2]

Does that mean that if I know an image will takeup roughly a third of the screen width I can do

[@BrunoAntunesPT]

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 ) 😊

[@cats_revenge]

You should create udemy tutorials, I would definitely buy. Great video, thank you.

[@BrunoAntunesPT]

Thank you Ivan 🙂 maybe one day 🤗😉

[@elsupersaiyan02]

is it possible to override the srcset to put different images per screen size? Like foo.jpg when in sm and bar.jpg when in lg

[@yachujoshi]

This video is too good!

[@BrunoAntunesPT]

THank you :D

[@shehanfernando8566]

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]

Thank you 😍 What's the error you are seeing?

[@BrunoAntunesPT]

Hello Shehan, I received a notification that you commented something, but sadly KZbin deleted it and I can't see it :( Can you repeat what you said?

[@lottylone7557]

you deserve a like

[@BrunoAntunesPT]

Thank you 😍

[@pcintra1]

Excelente explicação Bruno, parabéns e muito obrigado por compartilhar!

[@BrunoAntunesPT]

Muito obrigado Paulo 😍😍

[@DanielJohannesson]

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]

Thank you Daniel 😀 Both object fit and object position only work with layout fit 😊 You can't use those in any other layout 😔

[@BrunoAntunesPT]

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]

​@@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]

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 😔

[@edpalmeida]

Grande Bruno, explicação excelente. Parabéns! Obrigado

[@BrunoAntunesPT]

Obrigado :)

[@desmondamoako9854]

please do we have libraries to reduce the size of an image?

[@peter6292]

Hi Bruno, thanks for the great video once again! I was able to clone and see the examples on your repo but when I tried setting the src directly to unsplash I get a FetchError: time out and a response Request Method: GET Status Code: 500 Internal Server Error Remote Address: [::1]:3000 I've configured the domain to images.unsplash.com in next.config.js but it might be I'm also behind a proxy. Do you know if I'm missing something?

[@BrunoAntunesPT]

Thank you very much Peter 😀😀😍 It might be the proxy... but we can try that out easily 😅 Is it possible that you share your code (github or codesandbox) with me? 😊 With the code, I can also check/test the code and test for the proxy issue, it's a 2 in 1 deal 😅😅😅

[@peter6292]

​Hi @@BrunoAntunesPT I've only made two changes to the layout-fill-like-in-the-video.tsx. First is change image src an unsplash image directly and second is adding a next.config.js module.exports = { images: { domains: ['images.unsplash.com'], }, } I got some clue but I think this might be a bit off topic...😅 To add more info, I am on company vpn, so generally network requests has to go through a proxy to work. I can configure the proxy settings when using axios to make api reqs. Could it be, in this case next/image is not configured to route through a proxy?

[@BrunoAntunesPT]

@@peter6292 I'm very very very curious now =D Let's check this out.... I did a new deployment with a new example loading an external image (from another domain). Let me know if this new example is working for you - link below :) New example available at: youtube-2020-dec-nextjs-image-component.vercel.app/external-domain-image Github commit: github.com/bmvantunes/youtube-2020-dec-nextjs-image-component/commit/ac1d3fc722b4a5da38d71e7a7708c5f2d7985206

[@peter6292]

I pulled the latest and this is giving me the same problem. The external image on your site works but on my machine it just times out. Same when I build and npm run start.

[@BrunoAntunesPT]

@@peter6292 Taking that into account, I'm inclined to say that it's related with your company proxy, unfortunately 😔

[@valeriandigital7884]

Awesome video, thank you!!!

[@BrunoAntunesPT]

Thank you Valerian 😀😀

[@sergioterrazas97]

Great video as usual!!!

[@BrunoAntunesPT]

Glad you enjoyed it Sergio! Thank you =D

[@eminqasimov3398]

Bruno, thanks a lot, can you make video about `page/route as modal` in next.js, for example, in home page there are cards of articles when you clicked one of them , next page opens in modal. but the point is how can page be fetched if it has getStaticProps. or staticaly generated already. this topic really messed my mind

[@BrunoAntunesPT]

Thank you Emin =) Can you explain a bit better your requirements? I'll try to describe what I understood from it, and you please correct me where I'm interpreting wrong your request =) So What I understood: 1 - you have a website www.myapp.com 2 - when I go to www.myapp.com I have 3 cards that are a link using "next/link" (can be more than 3) 3 - when you click on the first card, you navigate to: www.myapp.com/card/1 (for example) 4 - The page www.myapp.com/card/1 has everything we have on www.myapp.com but now with a new modal/popup showing something on that popup regarding the card number 1 5- If I refresh my browser on www.myapp.com/cards/1, I'll get exactly what I had on point 4 Are those 5 points what you want/need? :)

[@eminqasimov3398]

​@@BrunoAntunesPT let me share some links. you will get more. dev.to/toomuchdesign/contextual-routing-and-modal-routes-in-next-js-18fn kzbin.info/www/bejne/an-1Y6iFd9h8q5Y kzbin.info/www/bejne/e6rNpoV5rdWZbLs 1. Click on a list item to view list item content details. 2.Show item details on modal and change url 3.closing modal pops url 4.all previous ui contexts are preserved (scroll positions, etc.) 5.when user lands on the item detail url (initial load), it should show item detail page (not modal) and what if pages are statically rendered already. I want static pages load fast in modal.

[@eminqasimov3398]

sorry for my question is not related video. Just I am interested in how can I join getStaticPath + getStaticProps with this concept

[@BrunoAntunesPT]

I saw your Instagram video =) In that specific case, I don't think you can leverage the getStaticProps and getStaticPaths (at least not the way you want for the modal - I might be wrong, I'm answering without doing any proper research...) My thinking is the following: Even in pages with getStaticProps/getStaticPaths, when you navigate (client side navigation using a next/link) you go to the server to get JSON and then when that HTTP call is finalised you render the component. Only on server side navigation (putting the URL directly in the browser and clicking enter or on a page refresh via cmd+r or F5), you'll get the HTML directly without doing the HTTP call to get the JSON. So even when you navigate client side, you don't get the HTML from the server as I assume you want, meaning you can't achieve your use case, at least not in an easy and directly way - once again, I didn't do any research before giving you this answer, so keep in mind I can be absolutelyyyyyy wrong =D Even if we go to extreme measures and put an "" for the modal, then you'll end up with 2 headers in your application (in the case of instagram for example - one header where you expect, another one inside the modal). That is because Nextjs when renders using getStaticProps/getStaticPaths, will render ALL your page, not a section of it =) You can see my video using getStaticProps and getStaticPaths: kzbin.info/www/bejne/g6nPnpl_bq6rjNU - In that video, you can see that the page is fully rendered, making it "very hard" to reuse that HTML for the modal :( Let me know if this answer helps, even if just a little bit =)

[@BrunoAntunesPT]

You have "another problem" - Only top level page components will be able to run getStaticProps/getStaticPaths/getServerSideProps/getInitialProps.

[@devstardude]

Please make a video specially for SEO in Next.js

[@BrunoAntunesPT]

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 😅😅

[@TryCatchDev]

Amazing Component Next Image. How to use next image in next 9?

[@BrunoAntunesPT]

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]

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]

@@TryCatchDev in the past 2/3 months I updated big applications at work. without any major problem 😊

[@TryCatchDev]

@@BrunoAntunesPT Oh good. I'll try later. Thank you.👍

[@BrunoAntunesPT]

Let me know if you face any major problems, I'm curious to know 😅😅

[@webdev723]

Thanks you are good former.

[@BrunoAntunesPT]

Thank you 😍

[@diogoluis6179]

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]

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]

@@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]

É excelente sim 😊 muito obrigado Diogo 😊

[@aahnafiya]

very useful... anyway love your accent 😎

[@BrunoAntunesPT]

Ahah thank you very much my friend ❤️❤️

[@narcissisticnarcissus4956]

Like you said this will not work with Github Pages or Netlify. I learned that the hard way.

[@BrunoAntunesPT]

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 :(

[@LucianoSoares85]

Good as always.

[@BrunoAntunesPT]

Thank you Luciano 😀😀

[@TrolerGaming]

Thanks for the video.