How to Add a Blurhash String to Images Using Next.js

Good news! Sanity actually generates blurhash strings automatically for your images. When you upload an image to Sanity, it can extract and store a blurhash value as part of the image metadata.

How to Enable Blurhash

In your schema definition, configure the metadata option for your image field:

{
  name: 'coverImage',
  title: 'Cover Image',
  type: 'image',
  options: {
    metadata: ['blurhash', 'lqip', 'palette'] // blurhash is included by default
  }
}

Actually, blurhash is included by default along with lqip and palette, so you don't even need to explicitly specify it unless you're customizing which metadata fields to include.

Accessing the Blurhash in Your Query

Once configured, you can query the blurhash from your image assets:

*[_type == "post"] {
  title,
  coverImage {
    asset-> {
      url,
      metadata {
        blurhash,
        dimensions {
          width,
          height
        }
      }
    }
  }
}

Using in Next.js

You can then use the blurhash string with libraries like react-blurhash or next-blurhash to display the placeholder while your actual image loads:

import { Blurhash } from 'react-blurhash';

<Blurhash
  hash={image.asset.metadata.blurhash}
  width={400}
  height={300}
  resolutionX={32}
  resolutionY={32}
  punch={1}
/>

Alternative: LQIP

Sanity also provides LQIP (Low Quality Image Placeholder) by default, which is a base64-encoded tiny version of your image. This can be used directly as a data URL without any additional libraries:

<img 
  src={image.asset.url} 
  style={{ backgroundImage: `url(${image.asset.metadata.lqip})` }}
  loading="lazy"
/>

Both blurhash and LQIP are generated asynchronously after upload, so there might be a brief delay before they're available in your queries. The metadata processing is usually very fast though!