title: How to create HOC for auth in Next.js?
body: <p>I want to create basic Next.js HOC for authentication. I searched but I didn't figure it out.</p>
  <p>I have an admin page in my Next.js app. I want to fetch from <code>http://localhost:4000/user/me</code> and that URL returns my user. If user data returns, component must be rendered. If data didn't return, I want to redirect to the <code>/admin/login</code> page.</p>
  <p>I tried this code but that didn't work. How can I solve this issue? Also can I use <code>useSWR</code> instead of <code>fetch</code>?</p>
  <pre><code>const withAuth = (Component, { data }) =&gt; {
    if (!data) {
      return {
        redirect: {
          destination: &quot;/admin/login&quot;,
        },
      };
    }
    return Component;
  };
  
  withAuth.getInitialProps = async () =&gt; {
    const response = await fetch(&quot;http://localhost:4000/user/me&quot;);
    const data = await response.json();
    return { data };
  };
  
  export default withAuth;
  </code></pre>
  <pre><code>const AdminHome = () =&gt; {
    return ();
  };
  export default withAuth(AdminHome);
  </code></pre>