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, 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.
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 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
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 🚀
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.
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.
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?
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
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
Hi there I have a problem with images when run the project after build npm run start ⨯ The requested resource isn't a valid image for /uploads/f1e764c3-1077-494f-98c8-02750aa0d076-9999980.png received text/html; charset=utf-8 but there are no problem with dev mode
![Jack Harlow - Hello Miss Johnson [Official Music Video]](http://i.ytimg.com/vi/Q86_nlRoIGw/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.
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.
I got a bit confused reading through the NextJS docs but that video cleared things up for me. Thanks
Your videos are so incredibly helpful, thanks for getting to the point quickly with clear explanation!
You're very welcome!
Dude you are a life saver. I finally totally understand what the next image component does. Thank you very much.
Glad it helped!
Hello from Russia and thank you for your videos
That note at the end about width and height classes was really helpful. Thanks!
The image calculator is amazing. Thanks for sharing that with us
Glad you liked it!
You have explained almost everything in the small video. Appreciate you
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
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.
You always make the best online tutorials for free. Thank you so much!!
Фантастика! Спасибо большое! Очень полезный туториал.
Hey Dave
please explain about edge and node runtime in NextJs
and please teach us NestJs.
thank you
I learned so much from you.
Thanks for this great video Dave!
Great explanation and tips to get correct sizes
Amazing explanation
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
Such valuable tips. Thanks Dave.
Great video, you really helped me to understand how the next/image component works! :)
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.
Great job dude !
Thank you Dave!
Dave, is it true that Iamge optimization will only work when deployed to Vercel?
RE: sizes - what happens if it's always a fullscreen image? do you have to tell the browser at all?
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
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.
So good tutorial thank you
In you video, I noticed that the next image created vertical paddings automatically, Why? and how to avoid that behaviour?
How do i support retina displays (2DPI and 3DPI) with NextJS Image?
thank you
thank you so so much!
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.
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.
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
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
Please a project on next js woth mysql complete
Why next image default position Absolute?😮
Thanks
Thank you for the support!
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.
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.
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
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
Hi there I have a problem with images when run the project after build
npm run start
⨯ The requested resource isn't a valid image for /uploads/f1e764c3-1077-494f-98c8-02750aa0d076-9999980.png received text/html; charset=utf-8
but there are no problem with dev mode