vercel__next.js/examples/cms-dotcms/components/dotcms-image.tsx

import Image from "next/image";
const DEFAULT_QUALITY = 20;

// https://dotcms.com/docs/latest/image-resizing-and-processing
const getUrlWithResizingParameters = ({
  src,
  width,
  quality = DEFAULT_QUALITY,
}) => {
  const urlParams = [];
  const lastSeparatorIdx = src.lastIndexOf("/");
  const imageIdentifierAndField = src.slice(0, lastSeparatorIdx);

  urlParams.push(imageIdentifierAndField);
  urlParams.push(width + "w");
  urlParams.push(quality + "q");

  return urlParams.join("/");
};

const dotCmsLoader = (props) => {
  return `${process.env.NEXT_PUBLIC_DOTCMS_HOST}${getUrlWithResizingParameters(
    props,
  )}`;
};

const DotCmsImage = (params) => {
  return <Image {...params} loader={dotCmsLoader} />;
};

export default DotCmsImage;