title: How to properly type the _document.tsx file from Next.js?
body: <p>I got most of this code from the official docs example on how to work with <code>styled-components</code>:</p>
  <p><a href="https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js" rel="noreferrer">https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js</a></p>
  <p>But the example uses <code>.js</code> and I'm using Typescript.</p>
  <p>I'm getting some type errors and warning and I'm not sure how to properly type it. I've already solved part of the problem. This is what I'm still missing:</p>
  <hr />
  <p><strong>Error 1:</strong> What should be the full signature type or the return type for the <code>static async getInitialProps(ctx)</code> function? What is the type for the <code>ctx</code> parameter?</p>
  <p><a href="https://i.stack.imgur.com/KUmMg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KUmMg.png" alt="enter image description here" /></a></p>
  <hr />
  <p><strong>Error 2:</strong> Unsafe access on <code>ctx.renderPage</code>. I guess this will be fixed once I properly type the <code>getInitialProps</code> function</p>
  <p><a href="https://i.stack.imgur.com/KR2Ph.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KR2Ph.png" alt="enter image description here" /></a></p>
  <hr />
  <p><strong>Error 3:</strong> This is also probably related to the missing type for <code>getInitialProps</code></p>
  <p><a href="https://i.stack.imgur.com/aJrA2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aJrA2.png" alt="enter image description here" /></a></p>
  <hr />
  <pre><code>import React, { ReactElement } from &quot;react&quot;;
  import Document, { Html, Head, Main, NextScript } from 'next/document';
  import { ServerStyleSheet } from &quot;styled-components&quot;;
  
  export default class MyDocument extends Document {
    
    static async getInitialProps(ctx) {
      const sheet = new ServerStyleSheet();
      const originalRenderPage = ctx.renderPage;
  
      try {
        ctx.renderPage = () =&gt;
        originalRenderPage({
          enhanceApp: (App) =&gt; (props) =&gt;
            sheet.collectStyles(&lt;App {...props} /&gt;),
        });
  
        const initialProps = await Document.getInitialProps(ctx);
        return {
          ...initialProps,
          styles: (
            &lt;&gt;
              {initialProps.styles}
              {sheet.getStyleElement()}
            &lt;/&gt;
          ),
        };
      } finally {
        sheet.seal();
      }
    }
  
    render(): ReactElement {
      return(
        &lt;Html lang=&quot;en&quot;&gt;
          &lt;Head&gt;
            // SOMETHING IN THE HEAD
          &lt;/Head&gt;
          &lt;body&gt;
            &lt;Main /&gt;
            &lt;NextScript /&gt;
          &lt;/body&gt;
        &lt;/Html&gt;
      );
    }
  }
  </code></pre>