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.
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.