How to use blurha.sh with new Next.JS Image Component

Question

Any idea how to use, in Next.JS 11, the new blur placeholder from Image component as announced on https://nextjs.org/blog/next-11#image-placeholders ?

<Image
 src={banner}
 alt={name}
 layout="responsive"
 width={1920}
 height={675}
 quality={100}
 placeholder="blur"
 blurDataURL={bannerBlurHash} // Here bannerBlurHash code as data url ?
 priority
/>

Cheers,

Answer 1

I built a quick utility to generate the data URL for a blurhash from an input image and to play with the blurhash parameters. The resulting data URL can be used as Next.js Image's blurDataURL

(Still a work in progress, but it's functional)

https://blurred.dev

Answer 2

I just have created a custom hook that solves this problem. It's here.

You just will need to do something like this:

const [blurData] = useNextBlurhash(bannerBlurHash);

And then pass the blurDatato your image