<h1 dir="auto">Bug report</h1>
<p dir="auto">I wanted to create a new next app using <code class="notranslate">npx create-next-app</code> with typescript. I followed all the steps and renamed .js files to .tsx and ran <code class="notranslate">yarn dev</code>. According to this blogpost: <a href="https://nextjs.org/blog/next-9#built-in-zero-config-typescript-support" rel="nofollow">https://nextjs.org/blog/next-9#built-in-zero-config-typescript-support</a> it should detect that the project is using typescript and add what's necessary but it didn't.</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto">If applicable, add screenshots to help explain your problem.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3116731/63625572-56cbb080-c600-11e9-9b16-04cc84388853.png"><img src="https://user-images.githubusercontent.com/3116731/63625572-56cbb080-c600-11e9-9b16-04cc84388853.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3116731/63625700-ac07c200-c600-11e9-9d94-353f506bf6ff.png"><img src="https://user-images.githubusercontent.com/3116731/63625700-ac07c200-c600-11e9-9d94-353f506bf6ff.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: Windows</li>
<li>Version of Next.js: 9.0.4</li>
</ul>
<p dir="auto">When (implicitly) using multiple <code class="notranslate">Head</code> elements in <code class="notranslate">_document.js</code>, e.g.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    return (
      &lt;html&gt;
        &lt;Head&gt;
          &lt;title&gt;Test&lt;/title&gt;
        &lt;/Head&gt;
        &lt;HeadStyle /&gt;
      ..."><pre class="notranslate">    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">html</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">title</span><span class="pl-c1">&gt;</span>Test<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">title</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">HeadStyle</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
      ...</pre></div>
<p dir="auto">where <code class="notranslate">HeadStyle</code> is defined as</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const HeadStyle =&gt; &lt;Head&gt;&lt;style&gt;{`body { margin: 0; color: red; }`}&lt;/style&gt;&lt;/Head&gt;;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">HeadStyle</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">`body { margin: 0; color: red; }`</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">... the second <code class="notranslate">Head</code>'s content never gets injected into the document <strong>on the first page load of a fresh <code class="notranslate">now</code> deployment</strong>. The consequent reloads (including in a clean browser) are fine.</p>

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<ul dir="auto">
<li>Multiple <code class="notranslate">Head</code> elements (implicit and explicit) work reliably (even in <code class="notranslate">_document.js</code>)</li>
</ul>
<h2 dir="auto">Current Behavior</h2>
<ul dir="auto">
<li>Broken page on the first page load of a fresh <code class="notranslate">now</code> deployment</li>
</ul>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Clone <a href="https://github.com/agurtovoy/nextjs-head-bug">https://github.com/agurtovoy/nextjs-head-bug</a></li>
<li><code class="notranslate">now</code></li>
<li>Open the deployed site, see this (note the black text and the absence of the custom <code class="notranslate">&lt;style&gt;</code> element in <code class="notranslate">&lt;head&gt;</code>):</li>
</ol>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3394202/33458660-b586c7a0-d5ec-11e7-80f9-bde8b26b30d0.png"><img width="792" alt="screen shot 2017-11-30 at 4 11 58 pm" src="https://user-images.githubusercontent.com/3394202/33458660-b586c7a0-d5ec-11e7-80f9-bde8b26b30d0.png" style="max-width: 100%;"></a></p>
<ol start="4" dir="auto">
<li>Refresh the page, get the expected result (text is red, <code class="notranslate">&lt;style&gt;</code> element is there):</li>
</ol>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3394202/33458793-32e1f9e0-d5ed-11e7-8ecb-9d118f340b06.png"><img width="769" alt="screen shot 2017-11-30 at 4 12 17 pm" src="https://user-images.githubusercontent.com/3394202/33458793-32e1f9e0-d5ed-11e7-8ecb-9d118f340b06.png" style="max-width: 100%;"></a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">This reproduces consistently, i.e. every time you push a new deployment, the very first page load will surface the issue. It also reproduces in dev env from time to time, but not consistently.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>4.1.4</td>
</tr>
<tr>
<td>node</td>
<td><code class="notranslate">now</code></td>
</tr>
<tr>
<td>OS</td>
<td><code class="notranslate">now</code>, macOS</td>
</tr>
<tr>
<td>browser</td>
<td>any</td>
</tr>
</tbody>
</table>