The Content SDK NextImage component

Next.js provides next/image, an optimized image rendering component that helps improve page load and rendering performance. To enable use of the next/image component in Content SDK applications, the @sitecore-content-sdk/nextjs package provides the NextImage component.

You can use the NextImage component instead of the Content SDK Image component to make use of the additional properties enabled by Next.js.

Similar to the next/image component, a properly configured NextImage component does the following:

  • Serves correctly sized images for each device, using 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

The NextImage component uses the Content SDK Media API to resize images.

Configuring the NextImage component

The NextImage component uses built-in image optimization from Vercel, but you can provide your own loader function using the loader property if needed.

NextImage supports the same properties as the next/image component except src. It provides the following additional properties that you can use to further configure it:

Name

Type

Description

field

ImageField | ImageFieldValue

Required.

Image field data provided by a Placeholder component.

editable

boolean

Whether the image can be edited in the SitecoreAI Page builder.

Default: true

imageParams

ImageSizeParameters[]

The query string parameters to append to the image URL.

mediaUrlPrefix

RegExp

A regular expression that finds the media URL prefix to be replaced by /-/jssmedia or /~/jssmedia.r

Important

Attempting to use the src property will cause the NextImage component to generate an error. If you want to use this property to provide an image source URL, you will need to use the standard next/image component instead of Content SDK's NextImage.

Examples

The following examples describe how you can use the NextImage component to implement editable or non-editable responsive images.

A simple, editable image

The following example renders a responsive image that is editable in the SitecoreAI Page builder:

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

A more advanced, non-editable image

The following example renders an image using server-side resize parameters. It's configured to not be editable in the Page builder:

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

In this example:

  • editable is false, meaning the image can't be edited in the Page builder.

  • unoptimized disables next/image source optimization in favor of imageParams.

  • imageParams passes parameters to SitecoreAI that resize the image on the server side.

Do you have some feedback for us?

If you have suggestions for improving this article,