<h1 dir="auto">Bug report</h1>
<p dir="auto">using <code class="notranslate">&lt;HEAD&gt;</code> in a layout component leads to duplicate tags</p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Here is my app.js:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;Provider&gt;
    &lt;Layout&gt;
         &lt;div&gt;
            &lt;Headroom&gt;
               &lt;Nav {...pageProps}&gt;&lt;/Nav&gt;
            &lt;/Headroom&gt;
            &lt;Component {...pageProps} /&gt;
            &lt;Footer&gt;&lt;/Footer&gt;
          &lt;/div&gt;
      &lt;/Layout&gt;
 &lt;/Provider&gt;"><pre class="notranslate"><code class="notranslate">&lt;Provider&gt;
    &lt;Layout&gt;
         &lt;div&gt;
            &lt;Headroom&gt;
               &lt;Nav {...pageProps}&gt;&lt;/Nav&gt;
            &lt;/Headroom&gt;
            &lt;Component {...pageProps} /&gt;
            &lt;Footer&gt;&lt;/Footer&gt;
          &lt;/div&gt;
      &lt;/Layout&gt;
 &lt;/Provider&gt;
</code></pre></div>
<p dir="auto">Here is my Layout.js:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export default ({ title, children }) =&gt; { return (
    &lt;Fragment&gt;
      &lt;Head&gt;
        &lt;meta charSet=&quot;UTF-8&quot; key=&quot;charset&quot;/&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; key=&quot;viewport&quot;/&gt;
        &lt;title&gt;{title}&lt;/title&gt;

        &lt;meta name=&quot;theme-color&quot; content=&quot;#909CA7&quot; key=&quot;themecolor&quot;/&gt;
        &lt;style dangerouslySetInnerHTML={{ __html: Styles }} key=&quot;global-styles&quot;/&gt;
        &lt;script src=&quot;https://www.google.com/recaptcha/api.js?render=explicit&quot; key=&quot;google-recaptcha&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;https://cdn.polyfill.io/v2/polyfill.min.js&quot; key=&quot;js-polyfill&quot;/&gt;
        &lt;script src=&quot;/static/js/dat.gui.min.js&quot; key=&quot;dat-gui&quot;&gt;&lt;/script&gt;
        &lt;link href=&quot;https://fonts.googleapis.com/css?family=Montserrat:300,500,700&quot; rel=&quot;stylesheet&quot; key=&quot;google-font-montserrat&quot;&gt;&lt;/link&gt;
      &lt;/Head&gt;
      {children}
      &lt;script
        src={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_KEY}&amp;libraries=geometry,places`}
        key=&quot;google-maps&quot;&gt;
      &lt;/script&gt;
    &lt;/Fragment&gt;
  )
}"><pre class="notranslate"><code class="notranslate">export default ({ title, children }) =&gt; { return (
    &lt;Fragment&gt;
      &lt;Head&gt;
        &lt;meta charSet="UTF-8" key="charset"/&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1" key="viewport"/&gt;
        &lt;title&gt;{title}&lt;/title&gt;

        &lt;meta name="theme-color" content="#909CA7" key="themecolor"/&gt;
        &lt;style dangerouslySetInnerHTML={{ __html: Styles }} key="global-styles"/&gt;
        &lt;script src="https://www.google.com/recaptcha/api.js?render=explicit" key="google-recaptcha"&gt;&lt;/script&gt;
        &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js" key="js-polyfill"/&gt;
        &lt;script src="/static/js/dat.gui.min.js" key="dat-gui"&gt;&lt;/script&gt;
        &lt;link href="https://fonts.googleapis.com/css?family=Montserrat:300,500,700" rel="stylesheet" key="google-font-montserrat"&gt;&lt;/link&gt;
      &lt;/Head&gt;
      {children}
      &lt;script
        src={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_KEY}&amp;libraries=geometry,places`}
        key="google-maps"&gt;
      &lt;/script&gt;
    &lt;/Fragment&gt;
  )
}
</code></pre></div>
<p dir="auto">Here is my _document.js:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      &lt;html&gt;
        &lt;Head /&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;div id=&quot;global-modal&quot; /&gt;
          &lt;div id=&quot;global-mask&quot; /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    )
  }
}"><pre class="notranslate"><code class="notranslate">export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      &lt;html&gt;
        &lt;Head /&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;div id="global-modal" /&gt;
          &lt;div id="global-mask" /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    )
  }
}
</code></pre></div>
<p dir="auto">On initial render - all of my link tags are duplicated.  If I navigate to another route - another identical tag gets added (3 tags now). If I navigate to a different route - yet another tag gets rendered, and so on and so forth.  It seems having a  component in a layout component is adding to an existing head, instead of replacing it. Is this expected behavior?</p>
<p dir="auto">A clear and concise description of what the bug is.</p>
 component is multiplying identical tags on every route navigation.
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Expect link tags to only be rendered once in global layout component with  defined.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: [e.g. macOS, Windows]</li>
<li>Browser (if applies) [e.g. chrome, safari]</li>
<li>Version of Next.js: [e.g. 6.0.2]<br>
Mac<br>
Next 8.0.3<br>
Chrome latest</li>
</ul>
<p dir="auto"><strong>version:</strong> v2.1.1</p>
<p dir="auto">additional webpack config to next.config.js:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="config.module.rules.push(
        {test: /\.(png|jpeg)$/, loader: 'url-loader?limit=8192'}
    )"><pre class="notranslate"><code class="notranslate">config.module.rules.push(
        {test: /\.(png|jpeg)$/, loader: 'url-loader?limit=8192'}
    )
</code></pre></div>
<p dir="auto">then in my component:<br>
<code class="notranslate">import image from '../static/enen.png'</code></p>
<p dir="auto">it comes the error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="This module was not found:

* /static/enen.png in ./pages?entry

To install it, you can run: npm install --save /static/enen.png
{ Error: Cannot find module '/static/enen.png'
..."><pre class="notranslate"><code class="notranslate">This module was not found:

* /static/enen.png in ./pages?entry

To install it, you can run: npm install --save /static/enen.png
{ Error: Cannot find module '/static/enen.png'
...
</code></pre></div>
<p dir="auto">I have tried to change the url as '/static/enen.png' , and in the css-in-jsx:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="p {
  background-image: url('../static/enen.png')
}
//or
p {
   background-image: $(require('../static/enen.png'))
}"><pre class="notranslate"><code class="notranslate">p {
  background-image: url('../static/enen.png')
}
//or
p {
   background-image: $(require('../static/enen.png'))
}
</code></pre></div>
<p dir="auto">all above comes the same error: <strong>can't find the module</strong>, I can get it using <code class="notranslate">&lt;img src="../static/enen.png"/&gt;</code></p>
<p dir="auto">hope your help.</p>