title: How to load Google Tag Manager with next/script component (Next.js 11)?
body: <p>Next.js v11 released a new <a href="https://nextjs.org/docs/basic-features/script" rel="noreferrer"><code>Script</code></a> component which has different strategies.</p>
  <p>It is recommended to load Google TagManager with <code>afterInteractive</code> strategy.</p>
  <p>I've tried</p>
  <pre class="lang-js prettyprint-override"><code>// _app.js
  
  import Script from 'next/script';
  
  class MyApp extends App {
    public render() {
      const { Component, pageProps } = this.props;
  
      return (
        &lt;&gt;
          &lt;Script strategy=&quot;afterInteractive&quot;&gt;
            {`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':` +
              `new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],` +
              `j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=` +
              `'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);` +
              `})(window,document,'script','dataLayer','GTM-XXXXXXX');`}
          &lt;/Script&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default MyApp;
  </code></pre>
  <p>It works fine, it loads google tag manager, but the problem is that it injects the same script on every page nav, which makes duplicate tags.</p>
  <p>How to utilize the new <code>Script</code> component?</p>