Next Link使用時にlazysizesでの画像更新ができない場合の対応方法

公開日時

先日、lazysizesで画像を遅延読み込みさせる対応を行ったが、next/linkを使ってページ遷移をせずに動的にページ内のコンテンツを書き換えている場合に画像が更新されない現象が発生した。

調べてみるとlazysizes attribute changeという公式プラグインが用意されていたのでこれを使って解決できた。


Related #js

Firebase Auth Googleログイン時のリダイレクトドメインを変更する

CNAME追加とHostingの「カスタムドメインを追加」を行う

jsで配列からランダムにn件取得する

lodashのsampleSizeを使った

jsで連番の配列を作成する

Array.from(Array(n).keys())

VercelのPreview環境に固定のサブドメインを割り当てる

X-Robots-Tagは付与されないので注意