The JSS NextImage component
Next.js provides next/image, which is an optimized image rendering component that helps you improve page load and rendering performance. To facilitate using the next/image component provided by Next.js in JSS applications, the @sitecore-jss/sitecore-jss-nextjs package introduces in version 20.1.0 the NextImage component.
You can use the NextImage component much like the JSS Image component or the next/image component, but NextImage supports additional properties.
In versions of JSS prior to 21.6.1, the NextImage component uses a custom loader.
Similar to the next/image component, the JSS NextImage component, when used correctly:
-
Serves correctly sized images for each device, with modern image formats.
-
Improves the visual stability of the page.
-
Improves page-loading time with lazy loading and visually attractive placeholders.
-
Resizes images on demand, whether they are stored locally or remotely.
To use the NextImage component, you must update @sitecore-jss/sitecore-jss-nextjs to version 20.1.0 or later.