2021-12-10

[Next.js] Dynamic ImportでSSRを回避する

Next.jsは静的にビルド（next export）するプロジェクトでも、開発時はSSRされてしまうためブラウザでしか動作しないコンポーネントを使用するとエラーが出て開発に支障が出てしまう。自分の場合はAPEXCHARTSを使用する際に問題に直面した。

これはDynamic Importの機能を使えば回避できる。公式の例にもある通り、SSRしたくないブラウザでしか動作しないコンポーネントに関しては ssr: false とした上でDynamic Importすればいい。

おわり。