Why can't I access the window in Next.js app '_app.js'?

Question

I have a Next.js app where I want to load the application and then check for Network access with a custom modal dialog that displays if the user disconnects to the internet. I set up an _app.js file for my application to set up the Context Provider but unable to check network access on it using the window.navigator. It results to an error: "ReferenceError: window is not defined". Is there any way I can load the application first so I can use the custom modal dialog I created?

_app.js

function MyApp({ Component, pageProps }) {
  console.log(window)
  return <Component {...pageProps} />
}

export default MyApp

Error upon page reload:
Approach #1

Answer 1

You can access window when component mounted by using useEffect:

function MyApp({ Component, pageProps }) {
 useEffect(() => {
        console.log(window)
 },[])
 return <Component {...pageProps} />

}

export default MyApp