This example of loader in next.js https://codesandbox.io/s/nextjs-example-of-image-loader-bkcfs?file=/pages/index.js:0-818

index.js

import Image from "next/image";

function GraphCMSImageLoader({ src, width }) {
  const relativeSrc = (src) => src.split("/").pop();

  return `https://media.graphcms.com/resize=width:${width}/${relativeSrc(src)}`;
}

function IndexPage({ products }) {
  return (
    <div className="gap-6 grid grid-cols-1 md:grid-cols-3">
      {products.map((product) => {
        console.log(product.image.url, " product.image.url");
        return (
          <div key={product.id}>
            <Image
              loader={GraphCMSImageLoader}
              src={product.image.url}
              width={400}
              height={400}
            />
            <h2 className="font-semibold text-lg">{product.name}</h2>
          </div>
        );
      })}
    </div>
  );
}