Using Images in Next.js (next/image examples)
Vložit
- čas přidán 1. 06. 2024
- Learn how to use the Next.js Image Component (next/image) to automatically optimize images and prevent layout shift, helping provide a better user experience for your visitors.
0:00 - Introduction
0:34 - Using next/image
1:21 - Image component HTML output
2:00 - Image optimization
3:02 - Remote images
4:19 - Background images
5:03 - Image sizes and fill
6:29 - Image grid with fill
7:41 - Responsive images
8:19 - Image API reference and loaders
9:00 - Conclusion
◆ Docs: nextjs.org/docs/app/building-...
◆ API reference: nextjs.org/docs/app/api-refer...
◆ Example: github.com/vercel/next.js/tre... - Věda a technologie
Love it! Currently I am building my first SaaS product with NextJS ... and this 'optimization course' was exactly what I needed! Thank you Lee
Being responsive by default is what we have been waiting for 😊
Exactly ❤
Too bad it isn't.
CSS isn't responsive by default. None of the HTML elements are. It's that way for a reason
Image component is cool, however:
- I hope this video talks more about how "deviceSizes" and "sizes" work together
- I currently find no way to remove the "blur" effect when using placeholder. In my case, I need to provide a solid default svg image.
- The caching image url is pointed to the next server itself, it would be much better if we have a way to config this, maybe to point to a cdn url, to avoid DDOS, for example.
- It will be awesome if there is a Picture component from next/picture, I need some behavior like switching different image urls in different breakpoints of screens. -> I think I should try to look into implementation of next/image to study the way it decide which width is the most suitable one with the screen, then create a Picture component myself.
For anyone have solutions or ideas for these, I appreciate when you leave a comment 😍
Always great content Lee, thank you!
Very nice background set up and video production quality.
Very honestly, the Image component is one of the reasons why I really like Next. Image optimization is such a headache to think about, and having it built into my framework is easily one of the greatest possible things about it. There's no need for me to reach for Cloudinary or anything like that aside from storage.
That's funny. I've never used the Image component because it's so confusing. Literally never managed to get an image working using it. So it just gives me more headaches.
@@loveboat the old one was super confusing, but the new one is a lot better
I am happy to see you posting new videos ❤ keep going 🎉
Thanks, Lee. Excellent and useful examples. Like )
Great job Lee! Tks 🎉
Thank you so much! That was very helpful!!!
Would love to see a picture tag implementation , using different images / aspects ratios on mobile / desktop
Great video, very valuable! 👍
the question is how to use blurDataUrl for dynamic images (remote images)
1. should we save the 10px image data in database
OR
2. save the 10px image and use plaiceholder lib to generate the data of the image
- it would be nice if blurDataUrl accepted the src of an small image instead of its data (so we dont have to use yet another lib)
Amazing update !
Thanks for this Lee!
I was wondering how can i allow a 2mb image but during the upload itself it shrinks/compresses and THEN stores in the bucket at a much reduced size, saving some sorage space as well? Im using supabase.
Thanks.
Hey Lee, amazing video, just wanted to know what vscode theme are you using looks quite attractive 😅
Great video! I’d like to see one about caching, both with appdir and pagedir.
czcams.com/video/gSSsZReIFRk/video.html
I love it when I find the solution to one of my problems while randomly scrubbing through coding videos
Great input
I think the next step for the image component is to set the width and height and generate the blur version without having to import the image first, just using the normal /[your public assets].
What happend with external images from a bucket? will the resize be made server side on the fly? or will store a cache for each image even if it is external?
Blur data URL is epic 👍
Thanks mate! ❤
No problem!
Nice! So we do we still need to install Sharp or not?
Nice! Here's a question tho... Let's say I have two versions of an image, one for regular screens and one that's double in size for HiDPI screens, how can I tell Image to serve one over the other? The sizes prop isn't really letting me do that and I have to resort to using the regular img tag with the srcSet attribute and specify "/image.png, /image-2x.png 2x" for it to work properly.
This is the main issue with Image component. The only way to do this is with deviceSizes/imageSizes in next.config.js. There are multiple issues registered regarding this and Vercel does not even try to solve this...
I have the same doubt. HTML element has the srcset attribute which works with sizes attribute to tell it which image file download depending on browser width. How can use the equivalent in Nextjs?
Maybe it is possible using a custom loader which generates the right URL depending on the browser width, but I am not sure about that. I am researching it. If you find out the answer post here please
Doing exactly like you did on the video, setting style={{maxWidth: "100%", height: "auto"}} is giving warning into console:
"Image with src "abcdefg" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio."
If I change maxWidth -> width I can get rid of the warning, but the layout explodes. I'm a bit confused...
have you found a solution?
hi ,
I am using images from the public folder but when I build and see the src and the browser downloads it does not compress them and leaves them in .jpeg or .png form and in theory I should optimize them what am I doing wrong?
that's how I use them
import Image from 'next/image'
great video!... what about svg icons with multiple icon sizes? should we use next/image for that?
SVG format is scalable by default, so you just need one icon for all the sizes. I would embbed SVG inline code as a React component instead of having a .svg file
quick question, so its ok to put any value for width and height as long as you inline style with the maxwidth : 100% and height : auto properties when youre using remote images? nextjs will automatically avoid layout shifts and render with the aspect ratio? it looks like its doing that in my local project but im not definitely sure.
Hello. Is there any opportunity to have image optimization library for React JS like Next/Image, which way is common for plain React projects, to have CDN like Imagekit, Imgix or Cloudinary or there is another better way without CDN?
I’m using Supabase storage in plain React app.
What if the external image is hosted on a Protected route ? Can we supply Authorization Headers to Next/Image ?
So when we import an image from the public directory we do not need to specify a width and a height or even use the fill prop ? But we need to use those props when the image is remote ?
The image width/height are automatically added when you import an image directly, yes. This works regardless if you use `fill` or not. When the image is remote, Next.js can't automatically determine that for you, so you have to add width/height to prevent layout shift.
I was wondering why in the Image srcset generated when specifying the sizes property, all the sources have the same pixel dimensions ? Am I doing something wrong ? I would have guessed that the image's pixel dimensions would be different for each specified size
Two questions regarding nextjs before i jump.
1: IF i want to use nextjs just for client side rendering (cuz i like many features of it like Link), how can i use nodejs + nextjs ?
2: how to test Nextjs with jest + react testing library ?
1. Everything is still sent from the server, but your initial response from the server could be no HTML and then render everything on the client-side, if you really want, yes.
2. nextjs.org/docs/pages/building-your-application/optimizing/testing
I have my frontend on nextjs 13 using app router and backed is in python django. And i want to use Image component currently both frontend and backend is on locally. Can you guide me how i can use the Image component of nextjs?
crystal clear
Love all your videos on NextJS, and love NextJS and what you guys are doing atm @leerob but just had to point out, in the English language, “height” is not pronounced with the “th” sound at the end. It rhymes with words like “right” or “bite” 😅
any idea on how to use videos as backgrounds in next js please?
How to opt out for image optimization cause some site that is eating my usage quota yet it's not so important in my scenario!
"Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders."
Why is this not working for me? The layers tool shows me that below the viewport the images are loaded already. The sentence makes me think it's using intersection, is that not the case? Or am I missing something?
hallo, can you make a tutorial to save image/file to local directory while API Posr?
Would love to see how to handle anything else than happy paths with the new app router. Retries for example
Do we have to import the image for this to work? because for some reason adding width and height properties are still required for me
Importing the image adds the width and height for you. If you are using a remote image, you need to either add the width and height yourself, or use the fill prop as shown in this video.
Which version of the image should I put as static file? (1x or 2x)?
The image component in Next.js is particularly beneficial for individuals who want to avoid the complexities of handling various rendered sizes.
Thank you
how about using placeholder="blur" with images coming from a url, cms, cdn, ... I think that's a much more real world example and I'm struggling with that for a long time.
Waiting for your video.
Can anyone tell me how to handle image from url with dynmic viewport sizes?
I though to create a hook around viewport width and then generate image at run time (which will already be because its from a url) using the said width.
Is any other way exists? Can this be done?
Beside this, thanks for the heads up for all the new features of the image tag from next. I love it and your tutorials. 😉 🎉
what VSCode Theme do u use?
this next version big problem is state managementing. Please do something for this. Internal global state managementing or connect other state managementing tools at least. Thanks
Images get 404 error and wont get displayed after deploying to AWS Amplify. Any thoughts?
i dosen't get it full, how is the workaround to global setup a backround image and get it converted
Unfortunately, I still got this "Error: Image with src "/..." is missing required "width" property.". I've already set style which contains width and height like you did in this video. I got an error but you didn't. What should I do?😭
Awesome
i am using sizes and fill as taught, the width is correct but why is my height 0 on the browser?
Does anyone know why when I index a bunch of photos in nextJs, and import them they don't show, but when importing individual ones they work ? I'm trying to map them into a grid.
I got a problem when building my app, local images are not rendering. Any reason why is this happening?
Using next version 13.3.4 and when I use the first example in this video, what you called, "the most basic," I get the error 'missing required width property'. Why am I or how are you not? Solving this is why I'm here.
Does the image component work with .svg ?
It does, but you don't need to use it. To optimize your SVG, you'd want to use a different tool. next/image is for optimizing raster images like pngs, not vector images like svgs. Like SVGO! jakearchibald.github.io/svgomg/
We would like to see the server actions with turbopack
trying to do this, similar to how you did it in the video but I keep getting this error:
Image with src "./SVG/tintin.svg" is missing required "width" property.
yeah, same.
same, I guess I will stick to , using 14.0 version ...
Now we need one for inline videos to play like gifs
why my next images are breaking after i deployed my next website using gitlab pages
GOAT🚀
Hi I think my comment got delete b/c I linked to the issue. next/image currently has a bug with "fill", see issue 50067
Good video
Thanks!
I think is missing a lot of points.
just have a look at how many questions NextJS experienced developers have about next/image component.
this doesnt work, Ive just tried to use the style property to set width and height (without the explicit width and height properties) and its not letting me:
Hi, loading.tsx is not working in app directory why?
maybe page.tsx "use client" ??
@@andrsh9388 no both page.tsx and loading.tsx are server components
I do not understand how to make responsive images)) can someone explain?
This doesn't work for GCP deployment, right?
Yes, it works. The images would be optimized by the Next.js server when using `next start`. I'd recommend installing and using `sharp`, too.
nextjs.org/docs/app/building-your-application/deploying#:~:text=If%20you%20are,excessive%20memory%20usage.
@@leerob Thanks. Will try it.
So finally😩 the annoy error gone now use like img tag
I mean the annoy require prop
My little Nigerian startup using the image component got charged using the image component and additional 50 usd
I love the component but the cost is too high when you start getting some traffic
What do you mean?
@@EmmanuelOdii80 so we are on the pro plan
You get 5000 image optimisation free for a month after that you need to pay for additional optimisations.
5000 might seem like a lot but it really isn’t, it doesn’t even last for a week on our product.
so you deployed the app on Vercel?
@@nivethan_me yeah
Background image example is not good
This video leaves many questions unanswered. No information on how to do art directing for example. Can you really talk about responsive images without art direction? What about background images? I mean the real background images - CSS background-image property. Why can't it use it?
github.com/vercel/next.js/discussions/19880#discussioncomment-6310787
i don't get how this works?
czcams.com/video/IU_qq_c_lKA/video.html
how does it optimize images from a remote source? this seems like a fake feature, that does not actually work.
unless you are doing an SSG, this is the only way that can actually work
First
Your responsive isn't responsive at all. What if we don't want to always stretch the image to 100% width.
But for Nextjs 14 images are still throwing off error tried the below stuff but no use - protocol: 'https',
hostname: 'example.cloudfront.net',
port: " ",
pathname: '/**',
Which version of the image should I put as static file? (1x or 2x)?