I am self taught dev and images have always been frustrating for me, but based on stackoverflow questions it seems I am not alone. Next.js image has been giving me trouble too. Thanks for this video, can't wait to try out these tips.
Now if you don't know the dimensions of an image in advance (coming from an API or something), you can use 'fill': container className="relative aspect-video overflow-hidden" Image src=... alt=... fill sizes="(max-width: 640px) 100vw, 25vw" className="object-cover" /Image /container 'relative' is needed on the container to use fill, 'aspect' sets the desired aspect ratio, I believe 'overflow-hidden' is necessary too, and on the image 'object-cover' makes the Image behave like a background cover. As for the sizes, if you have a grid of 4 columns with one image each, you don't need more than 25vw per image, but if on mobile you only have one column that takes all the screen, you want 100vw.
Hi Dave. Why you didn't mention in you video how to avoid warning in console/log about incorrect sizes? Because no matter what incorrect sizes you put into props you still will be getting the warning.
Thanks Dave you are an amaizing person you always dont forget to share us what you found, sizes prop has been a shady thing for me also thanks for sharing this
Thanks Dave, as always your videos are top notch. Unfortunately, the linter app didn't work on my website. It doesn't detect any images. I think it's getting caught up in the loading state of my GraphQL query.
RespImageLint doesn't work... It does the scanning but then shows blank page and 'SyntaxError: Unexpected token 'r', "respImageL"... is not valid JSON' in the console... does anyone know how to fix this?
Thanks for the video ❤ I am currently working on a car dealership project and I have been using both the next js image + photo compressor + firebase storage. I think the image size is supposed to max 70-80 kb
My issue with nextjs inage service is the price. 5000 8magr optinizations per month in pro plan. 5$ per additional 1000. Not so much for any kind of galleries (like ads, acommodation listings, etc) especially if you count different sizes for responsive images.
Does anyone know if sizes prop will work or not if I pass unoptimized true in next image? It won't produces src sets I think because of which sizes props won't work?
Hey Dave, Can you share one example of infinite loading with SSR. am stuck in this problem I have a large no of data set with filter. i want to add pagination in SSR Component. Can you Please Help me
Hey Dave, thanks for the nice explanation. I am currently optimizing my App with different images on different pages, how do I make sure the size of each image is because images are different on each page and I can't use Lint and put static size right, please guide.
If I didn't address that here - dynamic sizing - I'm sure I did in the image gallery project series I did for the Net Ninja here: ruclips.net/p/PL4cUxeGkcC9hYBP0AZ3MNdEiiZqd4mHGm
@@DaveGrayTeachesCode sadly Dave you using the same lint plugin there as well, my only confusion is if images on each page are of different sizes (few are 100px *150px and some are 350 * 200px, some random sizes) how I will add the sizes property if the images are small and I use fill they are stretching and not looking proper. I just want image should look good how it is uploaded and also take advantage of next image sizes propert.
It has changed quickly. The full course on my channel covers the fundamentals. After that, I've been adding individual topics like this. I do like the idea of creating a roadmap, too 🚀
Put in your best guess for sizes first. It will only recommend sizes if you have put yours in first. Basically it offers a correction. This is what I show in the video.
Redux / RTK Query is for client-side state management. Unless state for the client got complicated, I'd stick with handling most things in server components that can connect directly to your database.
Dave, I know this isn't the point of the video, but how can I manage auth with next and a separate backend? I would like to retrieve a token and user data and use it within a server component to make requests. I can currently only do this inside a client component with the help of context
![srcset and sizes attributes - [ images on the web | part one ]](http://i.ytimg.com/vi/2QYpkrX2N48/mqdefault.jpg)
I am self taught dev and images have always been frustrating for me, but based on stackoverflow questions it seems I am not alone.
Next.js image has been giving me trouble too. Thanks for this video, can't wait to try out these tips.
Dude you are a life saver. I finally totally understand what the next image component does. Thank you very much.
Glad it helped!
You have explained almost everything in the small video. Appreciate you
The image calculator is amazing. Thanks for sharing that with us
Glad you liked it!
That note at the end about width and height classes was really helpful. Thanks!
I got a bit confused reading through the NextJS docs but that video cleared things up for me. Thanks
Now if you don't know the dimensions of an image in advance (coming from an API or something), you can use 'fill':
container className="relative aspect-video overflow-hidden"
Image
src=...
alt=...
fill
sizes="(max-width: 640px) 100vw, 25vw"
className="object-cover"
/Image
/container
'relative' is needed on the container to use fill, 'aspect' sets the desired aspect ratio, I believe 'overflow-hidden' is necessary too, and on the image 'object-cover' makes the Image behave like a background cover.
As for the sizes, if you have a grid of 4 columns with one image each, you don't need more than 25vw per image, but if on mobile you only have one column that takes all the screen, you want 100vw.
Amazing explanation
You always make the best online tutorials for free. Thank you so much!!
Hello from Russia and thank you for your videos
Фантастика! Спасибо большое! Очень полезный туториал.
Hi Dave. Why you didn't mention in you video how to avoid warning in console/log about incorrect sizes? Because no matter what incorrect sizes you put into props you still will be getting the warning.
What the solution for that bro I was working on the issue for 2 days
Great video, you really helped me to understand how the next/image component works! :)
Thanks Dave you are an amaizing person you always dont forget to share us what you found, sizes prop has been a shady thing for me also thanks for sharing this
Thanks for this great video Dave!
Such valuable tips. Thanks Dave.
Great explanation and tips to get correct sizes
Thanks Dave, as always your videos are top notch. Unfortunately, the linter app didn't work on my website. It doesn't detect any images. I think it's getting caught up in the loading state of my GraphQL query.
thank you
Great job dude !
Thank you Dave!
Hey Dave
please explain about edge and node runtime in NextJs
and please teach us NestJs.
thank you
I learned so much from you.
RespImageLint doesn't work... It does the scanning but then shows blank page and 'SyntaxError: Unexpected token 'r', "respImageL"... is not valid JSON' in the console... does anyone know how to fix this?
I have not had this issue. Others have mentioned it. Might be worth a Google or look at any issues posted to the GitHub page for the project
RE: sizes - what happens if it's always a fullscreen image? do you have to tell the browser at all?
So good tutorial thank you
Thanks for the video ❤ I am currently working on a car dealership project and I have been using both the next js image + photo compressor + firebase storage. I think the image size is supposed to max 70-80 kb
In this video, you will see I take a very large image down to just under 30kb.
How do i support retina displays (2DPI and 3DPI) with NextJS Image?
Dave, is it true that Iamge optimization will only work when deployed to Vercel?
thank you so so much!
Why next image default position Absolute?😮
My issue with nextjs inage service is the price. 5000 8magr optinizations per month in pro plan. 5$ per additional 1000. Not so much for any kind of galleries (like ads, acommodation listings, etc) especially if you count different sizes for responsive images.
Thanks
Thank you for the support!
In you video, I noticed that the next image created vertical paddings automatically, Why? and how to avoid that behaviour?
Does anyone know if sizes prop will work or not if I pass unoptimized true in next image? It won't produces src sets I think because of which sizes props won't work?
Getting hydration errors using next/image despite giving width and height
Good timing - I talk about hydration errors in the video I published today: ruclips.net/video/iA8JR8GgTKs/видео.html
Hey Dave, Can you share one example of infinite loading with SSR. am stuck in this problem I have a large no of data set with filter. i want to add pagination in SSR Component. Can you Please Help me
Hey Dave, thanks for the nice explanation.
I am currently optimizing my App with different images on different pages, how do I make sure the size of each image is because images are different on each page and I can't use Lint and put static size right, please guide.
If I didn't address that here - dynamic sizing - I'm sure I did in the image gallery project series I did for the Net Ninja here: ruclips.net/p/PL4cUxeGkcC9hYBP0AZ3MNdEiiZqd4mHGm
@@DaveGrayTeachesCode sadly Dave you using the same lint plugin there as well, my only confusion is if images on each page are of different sizes (few are 100px *150px and some are 350 * 200px, some random sizes) how I will add the sizes property if the images are small and I use fill they are stretching and not looking proper.
I just want image should look good how it is uploaded and also take advantage of next image sizes propert.
Hey Dave i want to master next js can you kindly share a roadmap or something that contains all topics on next js so i know what to learn
It has changed quickly. The full course on my channel covers the fundamentals. After that, I've been adding individual topics like this. I do like the idea of creating a roadmap, too 🚀
@@DaveGrayTeachesCode thats great
hope we get to see the it from you soon
this linter you advised does everything but NOT "sizes". why is it not plugging out this values?
Put in your best guess for sizes first. It will only recommend sizes if you have put yours in first. Basically it offers a correction. This is what I show in the video.
Hii, Dave
I just finished the HTML course, I'm into CSS
How do you know so much ?
I keep learning a little more every day.
Please a project on next js woth mysql complete
Hey Dave, Can you share us nextJs typescript CRUD app with redux-rtk with SSR?
Redux / RTK Query is for client-side state management. Unless state for the client got complicated, I'd stick with handling most things in server components that can connect directly to your database.
Dave, I know this isn't the point of the video, but how can I manage auth with next and a separate backend? I would like to retrieve a token and user data and use it within a server component to make requests. I can currently only do this inside a client component with the help of context
There is a link to my Discord in the description for larger discussions.
@@DaveGrayTeachesCode thanks! I'm going to check it out
@@alefe238 were you able to get an answer? I'm also interested in the answer
i am first who liked this vedio thanks u did so much for world
And I'm 2nd