<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>
<p dir="auto">Use new Next.js plugin for TypeScript</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Use a hack to transpile TypeScript to JSX and then let Next.js handle it.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">With the release of Next.js v5 the current example with TypeScript is outdated and can be simplified with the new <a href="https://github.com/zeit/next-plugins/tree/master/packages/next-typescript">next-typescript</a> plugin.</p>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">I was working on Next.js with Netlify CMS by using withAmp().<br>
I add <code class="notranslate">&lt;style amp-custom&gt;</code> in <code class="notranslate">Next Head</code> but because of using <code class="notranslate">withAmp()</code> which (likely to) auto generate <code class="notranslate">&lt;style amp-custom&gt;</code> with blank style.</p>
<p dir="auto">The result is duplication of using &lt;style amp-custom&gt; which will failed if used AMP validator.<br>
I try searching around about adding CSS to withAmp and changing the 'auto added' amp-custom style but result was no luck, plus I can't seem to find a proper way to fix this and documentation about using withAmp properly (which is not on 'learn' and blog post) like: second parameter options of withAmp, does it only include <code class="notranslate">{ hybrid: true }</code> ?</p>
<p dir="auto">I can't seem to find a good documentation of <code class="notranslate">withAmp</code> and can't add <code class="notranslate">&lt;style amp-custom&gt;</code></p>
<h2 dir="auto">To Reproduce</h2>
<ol dir="auto">
<li>I set up a repo if you wanted to properly take a look at:</li>
</ol>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="git clone -b next-amp-issue-1 https://github.com/dusit-thani-core-team/Dusit-Blog"><pre class="notranslate">git clone -b next-amp-issue-1 https://github.com/dusit-thani-core-team/Dusit-Blog</pre></div>
<ol start="2" dir="auto">
<li>run <code class="notranslate">yarn dev</code> and go to <code class="notranslate">localhost:3000</code>, you should see there's two <code class="notranslate">&lt;style amp-custom=""&gt;</code>, one contains style, one doesn't</li>
<li><code class="notranslate">yarn export</code>, build failed as a result of failed AMP Validator from duplication of <code class="notranslate">&lt;style amp-custom&gt;</code></li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Is there a way to reduce <code class="notranslate">&lt;style amp-custom&gt;</code> to one, like adding a config to remove 'auto added' <code class="notranslate">&lt;style amp-custom&gt;</code> or add style to 'auto added' <code class="notranslate">&lt;style amp-custom&gt;</code>.</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/35027979/59555217-6d8ad100-8fd9-11e9-9ee6-48ab6e198d2c.png"><img src="https://user-images.githubusercontent.com/35027979/59555217-6d8ad100-8fd9-11e9-9ee6-48ab6e198d2c.png" alt="image" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/35027979/59555234-a2972380-8fd9-11e9-8d37-fc23101f67f9.png"><img src="https://user-images.githubusercontent.com/35027979/59555234-a2972380-8fd9-11e9-8d37-fc23101f67f9.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: Windows 10<br>
Tried on Chrome and Firefox.</li>
<li>Next.js 8.1.0, react: 16.8.6, react-dom: 16.8.6</li>
<li>Node 12.3.1, yarn 1.15.2</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">Add any other context about the problem here.<br>
Is there a clear documentation of using AMP with CSS or using AMP or just example using similar to this?</p>