next.jsで画像の斑点を処理する

普段skeleton処理をしたい場合は、antdのskeletonを持って使用できます.
nextではskeletonはテキストに適していますが、画像には向いていません.画像には多くの制限があるため、skeleton処理後も空白画面が表示されます.
空白画面が出たときにチーク処理された画像が見られるとuxの方が効果的だと思います.
静的インポートの場合.

<Image
   src={Thumbnail}
   alt="productImg"
   width={176}
   height={176}
   placeholder="blur" // 추가 
/>

placeholder=blurを追加するだけで自動的に埋め込まれます.
外部パスから画像を受信する必要がある場合(ダイナミックインポート)、

<Image
   src={Thumbnail}
   alt="productImg"
   width={176}
   height={176}
   placeholder="blur" // 추가
   blurDataURL="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mN8//HLfwYiAOOoQvoqBABbWyZJf74GZgAAAABJRU5ErkJggg==" // 추가
     
/>

blurDataUrlはdata:image/gif;base64,+24579142を含む.(画像画素が10 px未満であることを推奨し、10 pxより大きい画像を符号化すると、コンソールはパフォーマンス劣化警告を発行する)
png-pixelという名前のウェブサイトでは、base 64で符号化された画像画素が生成される.

筆者は1×1サイズの階調画像を符号化した.結果をnext/ImageのblurData URLに入れます.
毎日blurDataURLを作成するのが面倒で、画像画素を抽出するために色を直接入力したい場合は、Image Component With Color Data URL Exampleを使用します.
next/Image公式サイトではplaiceholderが推奨されています.
使い方から見るとplaiceholderはgetStaticPropsで構築時に画像を受信し、画像メタデータを渡す方式のようです.(そうでなければ、メッセージを残してください)

適用結果