I use a library which throws window is undefined
Next.js is universal, which means it executes code first server-side, then client-side. The window
object is only present client-side, so if you absolutely need to have access to it in some React component, you should put that code in componentDidMount
. This lifecycle method will only be executed on the client. You may also want to check if there isn't some alternative universal library which may suit your needs.
Alternatively, if you are aiming to render a component you can use next/dynamic
to dynamically import modules. You can also set the flag to ssr:false
. NextJS added support for this in v3.0 https://zeit.co/blog/next3-preview For more info read this post: next/dynamic
If the simple fact of import
ing the library is enough to trigger the error, you'll need to replace it with something like if (typeof window !== 'undefined') { require('the-lib'); }
.
If you're trying to use an external React component, also check react-no-ssr.