インターラプト開発者ブログ

インターラプトのプロダクト・サービスに関する開発ブログ

NextJsでSSRに対応していないライブラリを使う

NextJsで読み込まれたライブラリは、サーバサイドでもレンダリングできるようになっていますが、稀にSSRに対応していないライブラリがあります。ベースがjQueryになっているようなライブラリだとよくあります。

原因は内部でwindowを呼んでいることで、windowが見つからないエラーとなるためです。

この場合は、dynamic import を使います。

import dynamic from 'next/dynamic';

let Mod;
if (typeof window !== 'undefined') {
  Mod = dynamic(() => import('@mod/module'), {
    ssr: false,
  });
}

見たとおりwindowが定義されていない時は、Modはnullとなります。

ライブラリがexport defaultで宣言されている場合は下記のようにします。

let Mod;
if (typeof window !== 'undefined') {
  Mod = import('mod').then((module) => module.default);
}