Using Next.js Image Component in Sitecore XM Cloud

How Sitecore JSS NextImage Solves Image Challenges

A great website always incorporates images into its design. Images enhance visual appeal, break down content into a more digestible format, and improve the overall user experience. However, while images play a crucial role in design, they also come with challenges. These range from performance issues caused by unoptimized images and large file sizes to complexities in handling images within a CMS.

Fortunately, Sitecore addresses many of these challenges, while Next.js takes care of the rest. In a previous blog, we discussed the efficiency of using Next.js Image and introduced Sitecore’s NextImage component. In this post, we’ll dive deeper into how we can leverage the Sitecore JSS NextImage component to optimize images effectively.

Understanding the NextImage JSS Component

In a previous blog, we discussed the lengthy process of integrating both the Next.js Image component and the JSS Image component. With NextImage, this process is now much simpler—you can directly use an Image field while benefiting from Next.js's optimized image handling.

To use this component, ensure that your @sitecore-jss/sitecore-jss-nextjs package is version 20.1.0 or later. You can then import the component like the code below.

import { NextImage } from '@sitecore-jss/sitecore-jss-nextjs';

How NextImage Optimizes and Loads Images

By default, NextImage includes a custom loader that passes the src property to next/image. However, you can override this behavior by providing your own loader prop.

For image resizing and optimization, NextImage leverages the JSS Media API and Headless Services media handler to ensure efficient image delivery.

Commonly Used Props

• field – similar to the Image component, this will require the prop to use ImageField .
• editable – a boolean field that allows the component to be editable on the editors.

These properties are identical to those in the standard JSS Image component, so you don’t need to learn a new way of handling images. However, some additional configurations are required for Next.js images:

• width – an integer value that is required and translates to the pixel value.
• height – similar to width, it is a required integer field that uses it as a pixel value.

Basic Usage of NextImage

The simplest way to use NextImage is as follows:

<NextImage width={320} height={400} field={fields.image} className="h-32 w-32" />

Since Next.js images require explicit dimensions, you’ll need to familiarize yourself with the expected image sizes in your layouts. This may take some adjustment, but the optimization benefits are well worth it.

Advanced Usage of NextImage

You can enhance your image handling with additional attributes. In the example below:

• We use fetchpriority to control image loading order, ensuring key images load immediately instead of lazily.
• We use editable to prevent certain images from being editable in the Sitecore editor.

<NextImage
  width={320}
  height={400}
  field={fields.image}
  fetchpriority="high"
  editable={false}
  className="h-32 w-32"
/>

By leveraging these properties, you can fine-tune image behavior to enhance both performance and the editor experience. However, there's one more crucial step to address when using this component. If your images come from different sources, you may encounter issues where the page doesn’t load correctly. I'll cover this in the next section.

Configuring your next.config to Whitelist Domains

You’ll notice the error below when you don’t have the whitelisted domains setup in your next.config.js . To solve this error we’ll need to first access the next.config.js file of our frontend folder.

Error: Invalid src prop (https://fastly.picsum.photos/id/1/200/300.jpg?h=769&iar=0&w=1025&ttc=63874993108&tt=490D76B6E1510C255C9A32BF449BC8C5&hash=766EF33915D49C853CC082D21587F1B9) on `next/image`, hostname "fastly.picsum.photos" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Inside the nextConfig object, we’ll add another section similar to the code snippet below. I’ve also added based on the error above, how to deal with it. Reloading the page should now show those images.

const nextConfig = {
  ...

  // use this configuration to ensure that only images from the whitelisted domains
  // can be served from the Next.js Image Optimization API
  // see https://nextjs.org/docs/app/api-reference/components/image#remotepatterns
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'fastly.picsum.photos',
        pathname: '/id/**',
      },
      ...
    ],
  },
  ...
};

Exploring the Full Potential of Next.js Image

If you explore the official documentation for the Next.js Image component, you'll find a wide range of props available to enhance image handling. Next.js has put significant effort into optimizing this component, recognizing the crucial role images play in website development. Fortunately, Sitecore has taken advantage of this, integrating the component to significantly improve your website’s optimization and performance.