Introduction

Sanity offers a toolkit to interact with Next.js with the following features:

• Client-side live real-time preview for authenticated users.
• URL-helper for Sanity's image pipeline
• Rich-text component for Portable Text
• GROQ syntax highlighting

In this post we will deal with the second feature. Once our application is initialized using this package, the default way we have to present an image in the browser looks like this.

SanityImage component

My intention is to create a reusable component not only to reduce lines of code when working with images coming from Sanity, but also to provide a better user experience when loading images using Tailwind filters like blur or grayscale.
We only need React hooks to handle the loading/loaded state and the clsx library to apply CSS classes conditionally. This is our reusable component.

Finally we can use our SanityImage component as follows.

The default filter is Blur, so if this is the only filter you require it will not be necessary to add the placeholderFilter property to our component. Cheers!