Next JS Image Component Learning Points
Mar 16, 2023
- Use import {Image} from ‘next/image’;
- These images are lazy loaded when they come in the viewport through scrolling
- Put images in the “images” folder beside .next folder
- An optimized image in webp or avif format is loaded on the webpage
- If fetching images using url, then we need to provide the height and width on the Image component, because NextJs does not know upfront the size of the image
- Another way to provide dimensions on Image component is using layout={“fill”} and objectFit={“contain” | “cover” | .. } this makes image component equal to size of parent
- When using images from a URL, we have to whitelist that URL domain, for this add images.domain=[domainURL] in next.config.js
- NextJs server re-fetches images of higher dimensions, if we increase the width of the window
