Why “window” object is not defined in Next.js?
during server side rendering, there’s no window
and also it is not recommended to use global
object
window
object is only available in browser. but next.js is combined with server side, so window object is not available in next.js development
and also when you code like this,
this is also availble because, when you deploy like vercel, heroku, aws amplify etc,
then when you build for deploy, it didn’t know what is window object
{
baseURL: process.env.NODE_ENV === "production"
? window.location.href
: "http://localhost:3000";
}
so if you use window for innerWidth or something like that, then you would do like this
if (typeof window !== "undefined") {
console.log(window.innerWidth);
}