NextJS image loader for Directus

DirectusLoader.tsx

import type { ImageLoaderProps } from 'next/image'

const imgDomain = process.env.NEXT_PUBLIC_IMG_DOMAIN ?? ''

interface DirectusImageProps {
  fit?: 'cover' | 'contain' | 'inside' | 'outside'
}

export default function directusImageLoader({
  src: imageID,
  width,
  quality,
  fit,
}: ImageLoaderProps & DirectusImageProps) {
  const url = new URL(`https://${imgDomain}/assets/${imageID}`)
  url.searchParams.set('fit', fit ?? 'contain')
  url.searchParams.set('width', width.toString())
  url.searchParams.set('quality', quality?.toString() || '75')
  return url.href
}