[Image Resizing] Add documentation example showing how to use next/image

[GregBrimble]

Unfortunately, they aren't taking any PRs to add additional built-in loaders, but next/image is a popular component capable of using external resizing services to render an image.

Happy to do the PR if it's of interest. It should just be what follows, but I haven't properly tested yet.

import Image from 'next/image'

const normalizeSrc = (src: string): string => {
  return src[0] === '/' ? src.slice(1) : src
}

const cloudflareLoader = ({ src, width, quality }) => {
  const params = [`width=${width}`]
  if (quality) {
    params.push(`quality=${quality}`)
  }
  const paramsString = params.join(',')
  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

[kodster28]

Don't have the technical background for this myself, so tagging in @zaidf and @dotjs to see if they have any thoughts.

[kodster28]

Howdy @GregBrimble — just got word back from Zaid — this would be a great PR to make if you had the time.

[GregBrimble]

Sure thing, @kodster28! Will get that up sometime later this week :)

[kodster28]

Awesome! Whenever you create that PR, we'll link this issue to close it out.

[leerob]

Thank you for adding this to the docs! FYI, I explained more why we prefer the loader prop here 🙏