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 – プログラミング初心者のための入門ブログ