Next JS Image Component Learning Points

Akshay Jain
Mar 16, 2023

--

  1. Use import {Image} from ‘next/image’;
  2. These images are lazy loaded when they come in the viewport through scrolling
  3. Put images in the “images” folder beside .next folder
  4. An optimized image in webp or avif format is loaded on the webpage
  5. 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
  6. 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
  7. When using images from a URL, we have to whitelist that URL domain, for this add images.domain=[domainURL] in next.config.js
  8. NextJs server re-fetches images of higher dimensions, if we increase the width of the window

--

--