Next.js 13のImageコンポーネントでblurを反映させたい

Next.jsのImageコンポーネントでblurを設定する場合に焦点を絞り使い方を共有しておこうと思います。

Next.jsでblurを使用するにはImageコンポーネントのプロパティにplaceholder="blur"を含めます。

App.tsx

import heroImg from "public/images/hero.png";

const Hero = () => {
  return (
    <>
      <Image
        src={heroImg}
        width={1152}
        height={480}
        alt="ヒーロー画像"
        quality={75}
        placeholder="blur"
      />
    </>
  );
};

export default Hero;

そうすると、Next.jsが以下のようなオブジェクトでblurDataURLを自動で生成し、blur画像として優先して表示してくれるようになります。

{
  src: '/_next/static/media/hero.b887048d.png',
  height: 960,
  width: 2304,
  blurDataURL: '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fhero.b887048d.png&w=8&q=70',
  blurWidth: 8,
  blurHeight: 3
}

上の例ですと、幅8px、解像度70%のぼやけた画像で表示された後、元の画像が表示されるイメージです。

画像データは必ず先頭でインポートし、src属性には変数で指定します。

以下のように相対パスで直接画像を指定しても表示はされますが、オブジェクトはインポートを通じて生成されるのでblurDataURLが使用できなくなります。

src="./public/images/hero.png"

エラーが出るのですぐ気づくとは思いますが、ちょっとした盲点です。

簡単ではありますが、blurの使い方でした。

注意点として、今回紹介した自動でblurDataURLを生成するのはローカルからインポートした静的画像のみです。
動的に生成する画像の場合はblurDataURL Propsを手動で作成する必要があります。