Custom Sanity loader for Next JS Image component.

sanity.ts

import sanityClient, { ClientConfig } from '@sanity/client'
import sanityImage from '@sanity/image-url'

const options: ClientConfig = {
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  useCdn: true,
  useProjectHostname: true,
}

const client = sanityClient(options)

export const imageBuilder = sanityImage(client)

export default client

SanityImageLoader.ts

import Image, { ImageProps } from 'next/image';
import { imageBuilder } from './sanity';
import type { SanityImageSource } from '@sanity/image-url/lib/types/types';

interface MyImageProps extends Omit<ImageProps, 'src'> {
  src: SanityImageSource;
  quality?: number;
  blur?: number;
}

export default function MyImage({
  quality = 80,
  blur = 0,
  src,
  ...props
}: MyImageProps) {
  const baseURL = 'https://cdn.sanity.io/images/';

  return (
    <Image
      {...props}
      loader={({ width: srcWidth }) => {
        let url =
          imageBuilder
            .image(src)
            .width(srcWidth)
            .height(Number(props.height) || 256)
            .auto('format')
            .quality(quality)
            .fit('clip')
            .url() ?? '';

        if (blur) {
          url += `&blur=${blur}`;
        }

        return url;
      }}
      src={imageBuilder.image(src).url()?.toString().replace(baseURL, '') ?? ''}
    />
  );
}