Next.jsでLayzr.jsを使って画像読み込みをする方法

既存サイトを書き直していたら、layzr.jsの扱いにハマったので。

next/imageを使えというのは無しで。

結論：useEffectを使えばOK

• libs/layzr.ts

import Layzr from 'layzr.js';

export default function LayzrConfig() {
  const instance = Layzr({
    threshold: 200,
  });
  instance.on('src:before', (image) => {
    // ...
  });
  instance
    .update() // track initial elements
    .check() // check initial elements
    .handlers(true); // bind scroll and resize handlers
}

• LogoImage.tsx

import { useEffect } from 'react';
import LayzrConfig from 'libs/layzr';

略

export const LogoImage: React.FC = () => {

  useEffect(() => {
    LayzrConfig();
  }, []);

  return (<img data-normal="/static/images/logo.svg" alt="LOGO" />);
};