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