Next.jsでコンポーネントをSSRしたくないとき

windowにアクセスするコンポーネントを使いたくなるときに、Next.jsでSSRしているとwindowについて怒られます
これを回避するために、

• windowにアクセスするコードはuseEffectの中で書く
• レンダリング時にも必要な場合はコンポーネントをdynamic importする

という手があります
今回はdynamic importで詰まったのでそのやり方を書きます

dynamic importする

コンポーネント側は通常通り実装し、ページ側で以下のようにimportします

// pages/index.tsx
const CsrShitai = dynamic(() =>  import("../components/CsrShitai"), {
  ssr: false
});

このときに注意点として、dynamic importするコンポーネントはnamed exportが使えないという罠がありました。今のところデフォルトエクスポートするしかなさそうです