title: Typescript with NextJS
body: <p>I've been struggling to integrate Typescript with NextJS, mainly with destructured parameters in getInitialProps but also with the type of page functions. For example, here is my _app.tsx:</p>
  
  <pre><code>import { ThemeProvider } from 'styled-components';
  import App, { Container } from 'next/app';
  import Cookie from 'js-cookie';
  import React from 'react';
  
  import { CookiesProvider } from '../components/CookiesContext';
  import THEME from '../styles/config';
  
  import {
    GlobalStyles,
    Wrapper,
  } from './_app.style';
  
  type Props = {
    cookieSettings: {
      functionalOn: string;
      performanceOn: string;
    }
  };
  
  class Page extends App&lt;Props&gt; {
    static async getInitialProps({
      Component,
      ctx,
    }) {
      // Get initial page props
      const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
  
      // Get cookies settings
      const cookieSettings = {
        functionalOn: process.browser ? Cookie.get('functionalCookies') : ctx.req.cookies.functionalCookies,
        performanceOn: process.browser ? Cookie.get('performanceCookies') : ctx.req.cookies.performanceCookies,
      };
  
      return {
        cookieSettings,
        pageProps,
      };
    }
  
    render() {
      const {
        Component,
        cookieSettings,
        pageProps,
      } = this.props;
  
      return (
        &lt;Container&gt;
          &lt;ThemeProvider theme={THEME}&gt;
            &lt;CookiesProvider {...cookieSettings}&gt;
              &lt;Wrapper&gt;
                &lt;GlobalStyles /&gt;
                &lt;Component {...pageProps} /&gt;
              &lt;/Wrapper&gt;
            &lt;/CookiesProvider&gt;
          &lt;/ThemeProvider&gt;
        &lt;/Container&gt;
      );
    }
  }
  
  export default Page;
  </code></pre>
  
  <p>The only error I get here is that the Component and ctx parameters are implicitly of 'any' type. I'm using @types/next, as well as v8.1.1.Canary.40 of NextJS which includes types, so I thought stuff like this would be covered but I seem to have to declare what they are myself and I don't know since it's a third party package.</p>
  
  <p>Also, I have a page file like this:</p>
  
  <pre><code>import { NextPage } from 'next';
  import React, { Fragment } from 'react';
  
  import Metadata from '../components/Metadata';
  import withPageError from '../components/PageError/withPageError';
  
  type Props = {
    // TODO: Add props
  };
  
  const getInitialProps = async ({ res }) =&gt; {
    const page = await getPageData();
    if (!page &amp;&amp; res) res.statusCode = 404;
    if (!page) return {};
    return { page };
  };
  
  const Page: NextPage&lt;Props&gt; = () =&gt; (
    &lt;Fragment&gt;
      &lt;Metadata
        pageDescription="Page"
        pageTitle="Page"
        socialDescription="Page"
        socialTitle="Page"
      /&gt;
    &lt;/Fragment&gt;
  );
  
  Page.getInitialProps = getInitialProps;
  
  export default withPageError(Page);
  </code></pre>
  
  <p>Here I get red squigglies on Page.getInitialProps with the following error:</p>
  
  <p><code>Type '({ res }: { res: any; }) =&gt; Promise&lt;{ page?: undefined; } | { page: any; }&gt;' is not assignable to type '(ctx: NextPageContext) =&gt; Promise&lt;Props&gt;'.</code></p>
  
  <p>Also an error on <code>const Page</code> which is huge and doesn't make any sense to me.</p>
  
  <p>What am I missing in all of this? Surely I don't have to redeclare types for a load of NextJS stuff?</p>