Get help on Discord

How to use the Next.js Image Blur

6 replies
Last updated: Jun 17, 2021
Hey all! Does anyone have an example of using the new NextJs image blur with images from Sanity?
I've never tried it before but I think it should just work as long as you have the sanity cdn listed in your image domains in 
next.config.js

https://nextjs.org/docs/api-reference/next/image#src
https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/placeholder.js
i believe with dynamic assets you need to supply a blurhash to the image component too (i could be wrong)
oh right, yeah
If src is an object from a static import and the imported image is jpg, png, or webp, then blurDataURL will automatically be populated. Otherwise you must provide the blurDataURL property.
have you tried using the 
lqip
as the blurhash? (didnt know it existed until now)
ah yeah good shout on the lqip, will give that a try 🙂 thank you!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?