title: How to use Next/Head to render a script
body: <p>As I understand from my <a href="https://stackoverflow.com/questions/60918188/how-do-i-use-embed-code-in-react-with-hooks/60918371?noredirect=1#comment107777607_60918371">SO question</a> , I can use next/head to embed a script tag within a component of my React / Next JS app. So, I went about it as such:</p>
  
  <pre><code>import React, { Component } from "react";
  ...
  import Head from "next/head";
  export const Lead = props =&gt; {
    return (
  ...
          &lt;Head&gt;
            &lt;script
              class="3758abc"
              type="text/javascript"
              src="https://cdn2.fake.com/Scripts/embed-button.min.js"
              data-encoded="1234sdkljfeiASD9A"
            &gt;&lt;/script&gt;
          &lt;/Head&gt;
  ...
    );
  };
  
  </code></pre>
  
  <p><strong>Unfortunately, nothing rendered</strong>. I don't know if I'm missing something obvious here...
  I'm using Next 9.1.7.</p>
  
  <p>My _app.js looks like this:</p>
  
  <pre><code>
  import App, { Container } from "next/app";
  import Page from "../components/Page";
  import { ApolloProvider } from "react-apollo";
  import withData from "../lib/withData";
  
  class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
      let pageProps = {};
      if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx);
      }
      // this exposes the query to the user
      pageProps.query = ctx.query;
      return { pageProps };
    }
    render() {
      const { Component, apollo, pageProps } = this.props;
  
      return (
        // &lt;Container&gt;
        &lt;ApolloProvider client={apollo}&gt;
          &lt;Page&gt;
            &lt;Component {...pageProps} /&gt;
          &lt;/Page&gt;
        &lt;/ApolloProvider&gt;
        // &lt;/Container&gt;
      );
    }
  }
  
  export default withData(MyApp);
  </code></pre>
  
  <p>And my _document looks like this:</p>
  
  <pre><code>
  import Document from "next/document";
  import { ServerStyleSheet } from "styled-components";
  
  export default class MyDocument extends Document {
    static getInitialProps = async ctx =&gt; {
      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();
      }
    };
  }
  
  </code></pre>