Found the solution.
The NextJS build the component at the server side and send the build code to the browser. When it is rendering the component in server there is no window to capture the DOM data.
There is a solution form Next JS call - “Dynamic Import”
Next.js supports ES2020 dynamic import() for JavaScript. With it you can import JavaScript modules dynamically and work with them. They also work with SSR.
import dynamic from 'next/dynamic'
- const DynamicComponent = dynamic(() => import(‘../components/hello’))
It works like a regular React Component, and you can pass props to it as you normally would.
Now you can put your client side javaScripts in side the “hello” React component.
Example: window.sessionStorage.getItem("username");