Nextjsでwindowオブジェクトを使いたいっ!

Nextjsで普通に window.** って書いてもコード的にはエラーにはならないんですが、実行するとエラーになるっていう。。

ReferenceError: window is not defined

そもそもサーバー側(nodejs)でwindowオブジェクトは使えないので、このエラーが出たってことは、本来ブラウザ側で動いて欲しいコードがサーバー側で動いてる。。

SSR無効化

dynamic importでssrをfalseにしたコンポーネントは、ssrがされなくなります。
SSR無効化されているコンポーネントの内側は全部SSRされなくなるので、LayoutをSSR無効化してみました。

const Layout = dynamic(() => import("./layout"), { ssr: false });

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

これで基本的にはwindowオブジェクトが利用可能になりましたとさ。
本質的にはSSRしたくない部分だけをdynamic importにしないといけないですがとりあえず動かしたかったので。

参考

Next.jsでウィンドウオブジェクトにアクセスする方法 | 初心者向け解説 – deve.K's Programming Primer – プログラミング初心者のための入門ブログ