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); }