---
title: "Configuring the JSS NextImage component"
slug: "configuring-the-jss-nextimage-component"
abstract: "Reference documentation for the JSS NextImage component"
---
# Configuring the JSS NextImage component

The JSS NextImage component is a field rendering helper component that you use to display images configured in Sitecore fields with a [Next.js Image component](https://nextjs.org/docs/basic-features/image-optimization).

The JSS `NextImage` component uses built-in image optimization provided by Vercel, but you can provide your own [loader](https://nextjs.org/docs/basic-features/image-optimization#loaders) if required with the help of the `loader` property. In versions of JSS prior to 21.6.1, the `NextImage` component uses a custom loader.

The component uses the [JSS Media API](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/jss-media-api.html "JSS Media API") and the [Headless Services media handler](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/media-handler.html "Media Handler") to resize images.

> [!note]
> To use the `NextImage` component, you must update `@sitecore-jss/sitecore-jss-nextjs` to version 20.1.0 or later.

The following table contains the properties you can use to configure the `NextImage` component:

| Name | Type | Description |
| --- | --- | --- |
| `field` | `ImageField \| ImageFieldValue` | Required.<br><br>Image field data. The data is provided by a `Placeholder` component. |
| `editable` | `boolean` | Indicates whether the Sitecore-formatted output must be used.<br><br>Default: `true`. |
| `mediaUrlPrefix` | `RegExp` | A regular expression that finds the media URL prefix to be replaced by `/-/jssmedia` or `/~/jssmedia`. |
| `imageParams` | `ImageSizeParameters[]` | The [query string parameters](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/the-image-size-parameters.html) to append to the image URL. |

In addition to the properties listed in the previous table, the `NextImage` component supports all the [properties of the Next.js Image](https://nextjs.org/docs/api-reference/next/image) component except `src`.

> [!note]
> If you add the `src` property, the component throws an error. To directly provide an image source URL through the `src` property, you must use the `next/image` component.

## Examples

You can use the `NextImage` component to display editable or non-editable responsive images.

### Simple image

The following example shows how to display a responsive, optimized, editable image:

```tsx
<NextImage field={props.fields.image} height="51" width="204" />

```

### Advanced image with image size parameters

The following example shows how to display a non-editable image where you control the resizing and editing:

```tsx
<NextImage
  field={props.fields.image}
  editable={false}
  unoptimized={true}
  imageParams={{ mw: 100, mh: 50 }}
  height="50"
  width="94"/>

```

In this example:

- `editable` - controls whether the image can be edited in Sitecore Experience Editor.
- `unoptimized` - disables `next/image` source optimization in favor of `imageParams`.
- `imageParams` - [image sizing parameters](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/the-image-size-parameters.html "The image size parameters") that are passed to Sitecore to resize the image server-side.

    > [!important]
    > Because JSS does not support security hashing of media URLs, you must [white-list these parameter sets on the server](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/media-handler.html "Media Handler").