The JSS NextImage component

Current version: 21.x

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

Note

To use the NextImage component, you must update @sitecore-jss/sitecore-jss-nextjs to version 20.1.0 or later.

Do you have some feedback for us?

If you have suggestions for improving this article,