useNextBlurhash is a custom hook that from a blurhash string will give you a blurDataUrl to add to your dynamics image in Nextjs apps, getting so a better user experience.
To get more context I recommend you read this.
You need at least Next.js 11.
npm install use-next-blurhash
or
yarn add use-next-blurhash
useNextBlurhash accepts four values but only the hash is required
useNextBlurhash(hash, width, height, puch);
Is not necessary that the width and the height that we passed are the same that the original image, I personally recommend you to use the default values because at the end the blurred image will cover all the original image space and looks good.
import Image from "next/image";
import useNextBlurhash from "use-next-blurhash";
export default function Something(props) {
const [blurDataUrl] = useNextBlurhash("LEHV6nWB2yk8pyo0adR*.7kCMdnj");
return (
<Image
src="https://nextjs.org/static/images/learn.png"
placeholder="blur"
blurDataURL={blurDataUrl}
alt="Picture of the author"
/>
);
}
If you deploy with Vercel, you may have an error something like this: version
ZLIB_1.2.9' not found`
You can fix it following these steps
Also, you can check the original issue and solution to understand what is going on.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.