XM Cloud: Are you experiencing the following error?

Error: Invalid src prop (https://xmcloudcm.localhost/-/jssmedia/Feature/JSS-Experience-Accelerator/Basic-Site/bottom-left.jpg?h=386&iar=0&w=580&hash=254749A9C3E4F5FD56D0CC2922989702) on `next/image`, hostname "xmcloudcm.localhost" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Screenshot — 1

Screenshot — 2

After setting up XM Cloud locally, I encountered the above error. To resolve this, I added the following hostname entries in next.config.js under the images section, and it started working.

  images: {
    remotePatterns: [
      {
        protocol:'https',
        hostname:'xmcloudcm.localhost',
        port:'',
        pathname:'/**'
      },
      {
        protocol:'https',
        hostname:'sxastarter.localhost',
        port:'',
        pathname:'/**'
      }  
    ]
  }

After implementing the solution and reloading, the error disappeared.

The reason for writing this post is that sometimes small issues or errors in an application can consume a lot of time. Finding the right solution quickly can save a considerable amount of time.

Thanks to Jason Woods and the Sitecore Community Slack channel, which provided me with useful reference links to help resolve this error.

References:
https://nextjs.org/docs/messages/next-image-unconfigured-host
https://doc.sitecore.com/xmc/en/developers/jss/latest/jss-xmc/troubleshooting-jss-next-js-apps.html#sitecore-images-dont-load-on-localhost

Happy XM Cloud Learning…