title: Next JS with react-redux HOC typescript error
body: <p>I've been trying to get the types correct for a HOC that wraps most of the Next pages but I can't seem to get rid of all the type errors.</p>
  
  <p>With the current code, I am getting a type error on the <code>connect</code> function which I haven't been able to resolve for awhile.</p>
  
  <p>I'm assuming that I may have the Component type inside the <code>PageWrapper</code> component done incorrectly?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Argument of type 'ConnectedComponent&lt;typeof HomePage, Pick&lt;(ClassAttributes&lt;HomePage&gt; &amp; ComponentClass&lt;{}, any&gt; &amp; { getInitialProps?(context: NextPageContext&lt;any, AnyAction&gt;): {} | Promise&lt;...&gt;; } &amp; IStateProps) | (ClassAttributes&lt;...&gt; &amp; ... 2 more ... &amp; IStateProps), "ref" | ... 5 more ... | "key"&gt;&gt;' is not assignable to parameter of type '(ComponentClass&lt;{}, any&gt; &amp; { getInitialProps?(context: NextPageContext&lt;any, AnyAction&gt;): {} | Promise&lt;{}&gt;; }) | (FunctionComponent&lt;...&gt; &amp; { ...; }) | (ComponentClass&lt;...&gt; &amp; ... 1 more ... &amp; { ...; }) | (FunctionComponent&lt;...&gt; &amp; ... 1 more ... &amp; { ...; })'.
    Type 'ConnectedComponent&lt;typeof HomePage, Pick&lt;(ClassAttributes&lt;HomePage&gt; &amp; ComponentClass&lt;{}, any&gt; &amp; { getInitialProps?(context: NextPageContext&lt;any, AnyAction&gt;): {} | Promise&lt;...&gt;; } &amp; IStateProps) | (ClassAttributes&lt;...&gt; &amp; ... 2 more ... &amp; IStateProps), "ref" | ... 5 more ... | "key"&gt;&gt;' is not assignable to type 'FunctionComponent&lt;{}&gt; &amp; { getInitialProps?(context: NextPageContext&lt;any, AnyAction&gt;): {} | Promise&lt;{}&gt;; }'.
      Type 'ConnectedComponent&lt;typeof HomePage, Pick&lt;(ClassAttributes&lt;HomePage&gt; &amp; ComponentClass&lt;{}, any&gt; &amp; { getInitialProps?(context: NextPageContext&lt;any, AnyAction&gt;): {} | Promise&lt;...&gt;; } &amp; IStateProps) | (ClassAttributes&lt;...&gt; &amp; ... 2 more ... &amp; IStateProps), "ref" | ... 5 more ... | "key"&gt;&gt;' is not assignable to type 'FunctionComponent&lt;{}&gt;'.
        Types of parameters 'props' and 'props' are incompatible.
          Type '{ children?: ReactNode; }' has no properties in common with type 'Pick&lt;(ClassAttributes&lt;HomePage&gt; &amp; ComponentClass&lt;{}, any&gt; &amp; { getInitialProps?(context: NextPageContext&lt;any, AnyAction&gt;): {} | Promise&lt;...&gt;; } &amp; IStateProps) | (ClassAttributes&lt;...&gt; &amp; ... 2 more ... &amp; IStateProps), "ref" | ... 5 more ... | "key"&gt;'.ts(2345)</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>HomePage.tsx</strong>
  <div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Layout from 'components/Layout'
  import PageWrapper from 'components/PageWrapper'
  import { NextPage } from 'next'
  import React from 'react'
  import { connect } from 'react-redux'
  import { IContactState } from 'redux/contact/reducer'
  import { IApplicationState } from 'redux/store'
  
  interface IStateProps {
    contact: IContactState
  }
  
  class HomePage extends React.Component&lt;NextPage &amp; IStateProps&gt; {
    render() {
      const { contact } = this.props
  
      return (
        &lt;Layout title="Dashboard"&gt;
          &lt;section className="dashboard-wrapper"&gt;
            &lt;div className="dashboard"&gt;
              &lt;h1&gt;Welcome {contact.firstName}&lt;/h1&gt;
            &lt;/div&gt;
          &lt;/section&gt;
        &lt;/Layout&gt;
      )
    }
  }
  
  const mapStateToProps = (state: IApplicationState): IStateProps =&gt; ({
    contact: state.contact
  })
  
  export default PageWrapper(connect(mapStateToProps)(HomePage))</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>PageWrapper.tsx</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { NextComponentType, NextPageContext } from 'next'
  import React from 'react'
  
  const PageWrapper = (Component: React.ComponentType &amp; NextComponentType) =&gt; (
    class extends React.Component&lt;NextComponentType&gt; {
      static async getInitialProps (ctx: NextPageContext) {
  
        return {
          ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : undefined),
        }
      }
  
      render() {
        return (
          &lt;Component {...this.props} /&gt;
        )
      }
    }
  )
  
  export default PageWrapper</code></pre>
  </div>
  </div>
  </p>