title: How to fetch the API details from a component folder using Next.js?
body: <p>I have a reusable component that I have created on the components folder where I have all the details from the user that logs in to the system which is a header section.</p>
  
  <p>I am trying to use <code>getInitialProps</code> using fetch with <code>isomorphic-unfetch</code>.</p>
  
  <pre><code>static async getInitialProps(ctx) {
      const UserdetailsRespone = await fetch("my API url");
      const UserdetailsJson = await UserdetailsRespone.json();
      return { UserDetails: UserdetailsJson.root[0] };
   }
  </code></pre>
  
  <p>In the render method when I log this.props.UserDetails I get <code>undefined</code>.
  It is the same API fetch as the one I am doing in the pages folder where I am able to fetch an API response. But I am not able to fetch the response in the components folder.</p>
  
  <p>Can someone help me to solve it?
  Thanks in Advance.</p>