title: NextJS issue reading items already in local storage
body: <p>On logging into my NextJS application, I am saving some user data to local storage.</p>
  <p>I am trying to render this into a small component which always displays the users name. The issue i am getting is that it is only sometimes showing and other times it is displaying as <code>null</code> ... It seems when i log in, it displays as null, but when i reload the page it works.</p>
  <p>This is what I have;</p>
  <pre><code>import { useEffect } from 'react';
  
  export default function ProfileDisplay() {
      useEffect(async () =&gt; {
          const userName = JSON.parse(localStorage.getItem('profile'));
          console.log(userName);
      }, []);
  
      return (
          &lt;div&gt;
              {userName}
          &lt;/div&gt;
      )
  }
  </code></pre>