Nextjsでwindowオブジェクトを使いたいっ!
 2023年8月3日
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 – プログラミング初心者のための入門ブログ