title: Using the Next.js Head component outside of _document crashes the page
body: <p>I am trying to use <em>Next.js</em> with <em>Typescript</em> and <em>Material UI</em>. There are countless tutorials online on how to set up Next.js to work with Material UI, and all of them seem to be using exactly the same code in <code>_document.js</code> and <code>_app.js</code> respectively.</p>
  <p>I've tried both adapting the code in <code>_document.js</code> a tiny bit into a typescript <code>_document.tsx</code>, and copy-pasting it as-is, but everytime I get the same issue, which is that whenever I try to use <code>&lt;Head /&gt;</code> outside of <code>_document.tsx</code>, even just within <code>_app.tsx</code> to set a title and viewport meta, as the code in the tutorials suggests, I get a very much non-helpful error message (full stacktrace included below):</p>
  <p><code>TypeError: Cannot destructure property 'styles' of 'this.context' as it is null.</code></p>
  <p>I had the exact same issue in a previous project of mine, which is why it both surprises and frustrates me that there seems to be no one having the same problem as me, and that every single tutorial I could find includes the exact same code which doesn't seem to work for me.</p>
  <p>Here is my code:</p>
  <p><strong><code>_document.tsx</code></strong></p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import Document, { DocumentContext, DocumentInitialProps, Head, Html, Main, NextScript } from &quot;next/document&quot;;
  import { ServerStyleSheets } from &quot;@material-ui/core/styles&quot;;
  import theme from &quot;../constants/theme&quot;;
  
  class MyDocument extends Document {
      render() {
          return (
              &lt;Html lang=&quot;en&quot;&gt;
                  &lt;Head&gt;
                      &lt;meta name=&quot;theme-color&quot; content={theme.palette.primary.main} /&gt;
                  &lt;/Head&gt;
                  &lt;body&gt;
                      &lt;Main /&gt;
                      &lt;NextScript /&gt;
                  &lt;/body&gt;
              &lt;/Html&gt;
          );
      }
  
      static async getInitialProps(ctx: DocumentContext): Promise&lt;DocumentInitialProps&gt; {
          const sheets = new ServerStyleSheets();
          const originalRenderPage = ctx.renderPage;
  
          ctx.renderPage = () =&gt; originalRenderPage({
              enhanceApp: (App) =&gt; (props) =&gt; sheets.collect(&lt;App {...props} /&gt;)
          });
  
          const initialProps = await Document.getInitialProps(ctx);
  
          return {
              ...initialProps,
              styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()]
          }
      }
  }
  
  export default MyDocument;
  </code></pre>
  <p><strong><code>_app.tsx</code></strong></p>
  <pre class="lang-js prettyprint-override"><code>import { CssBaseline, ThemeProvider } from &quot;@material-ui/core&quot;;
  import { Head } from &quot;next/document&quot;;
  import React from &quot;react&quot;
  import theme from &quot;../constants/theme&quot;;
  
  function MyApp({ Component, pageProps }) {
    React.useEffect(() =&gt; {
      const jssStyles = document.querySelector(&quot;#jss-server-side&quot;);
      if (jssStyles) jssStyles.parentElement.removeChild(jssStyles);
    }, []);
  
    return (
      &lt;React.Fragment&gt;
        &lt;Head&gt;
          &lt;title&gt;Title&lt;/title&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
        &lt;/Head&gt;
        &lt;ThemeProvider theme={theme}&gt;
          &lt;CssBaseline /&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/ThemeProvider&gt;
      &lt;/React.Fragment&gt;
    )
  }
  
  export default MyApp
  
  </code></pre>
  <p>I'll gladly provide more if needed, but since I don't really understand what the problem is, I don't really know which parts are relevant to post here.</p>
  <p>This is the full <strong>stacktrace</strong> for the error I'm getting:</p>
  <pre><code>TypeError: Cannot destructure property 'styles' of 'this.context' as it is null.
      at Head.render (E:\dev\weblore-web\.next\server\pages\_document.js:484:7)
      at processChild (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3450:18)
      at resolve (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
      at ReactDOMServerRenderer.render (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
      at ReactDOMServerRenderer.read (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
      at renderToString (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
      at renderPage (E:\dev\weblore-web\node_modules\next\dist\next-server\server\render.js:54:851)   
      at Object.ctx.renderPage (E:\dev\weblore-web\.next\server\pages\_document.js:963:28)
      at Function.getInitialProps (E:\dev\weblore-web\.next\server\pages\_document.js:310:19)
      at Function.getInitialProps (E:\dev\weblore-web\.next\server\pages\_document.js:971:85)
      at loadGetInitialProps (E:\dev\weblore-web\node_modules\next\dist\next-server\lib\utils.js:5:101)
      at renderToHTML (E:\dev\weblore-web\node_modules\next\dist\next-server\server\render.js:54:1142)    at async E:\dev\weblore-web\node_modules\next\dist\next-server\server\next-server.js:107:97     
      at async E:\dev\weblore-web\node_modules\next\dist\next-server\server\next-server.js:100:142    
      at async DevServer.renderToHTMLWithComponents (E:\dev\weblore-web\node_modules\next\dist\next-server\server\next-server.js:132:387)
      at async DevServer.renderToHTML (E:\dev\weblore-web\node_modules\next\dist\next-server\server\next-server.js:133:522)
  </code></pre>