---
title: "The JSS NextImage component"
slug: "the-jss-nextimage-component"
abstract: "Serve optimized images to improve page performance metrics."
---
# 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.

> [!note]
> 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](https://web.dev/user-centric-performance-metrics/#types-of-metrics) 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.