Skip to main content

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);
}