<p dir="auto">Hi,</p>
<p dir="auto">Running the example, using a custom Document <a href="https://github.com/zeit/next.js/tree/master/examples/with-styled-components">(with-styled-components)</a> I noticed that the stylesheets are being added in duplicate to the page.</p>
<p dir="auto">Apparently flushing the stylesheets like we're doing <a href="https://github.com/zeit/next.js/blob/master/examples/with-styled-components/pages/_document.js#L6">here</a> avoids this issue but raises a total different one (FOUC).</p>
<p dir="auto">Any idea why the stylesheets are being added more than once and any tip how to avoid this?</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>


<p dir="auto">A method in router API that allows aborting upcoming route change.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Right now router exposes <code class="notranslate">abortComponentLoad</code> method but it seems to be designed only for internal use and it doesn't work if it's called in <code class="notranslate">routeChangeStart</code> handler. It works only after this piece of code was executed:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="async fetchComponent (route, as) {
  let cancelled = false
  const cancel = this.componentLoadCancel = function () {
    cancelled = true
  }"><pre class="notranslate"><span class="pl-en">async</span> <span class="pl-s1">fetchComponent</span> <span class="pl-kos">(</span><span class="pl-s1">route</span><span class="pl-kos">,</span> <span class="pl-s1">as</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">let</span> <span class="pl-s1">cancelled</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span>
  <span class="pl-k">const</span> <span class="pl-s1">cancel</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">componentLoadCancel</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">cancelled</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span>
  <span class="pl-kos">}</span></pre></div>
<p dir="auto">Workaround:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Router.ready(() =&gt; {
  Router.router.on('routeChangeStart', () =&gt; {
    setTimeout(() =&gt; {
      Router.router.abortComponentLoad();
    });
  });
});"><pre class="notranslate"><span class="pl-v">Router</span><span class="pl-kos">.</span><span class="pl-en">ready</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-v">Router</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'routeChangeStart'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-v">Router</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-en">abortComponentLoad</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Context</h2>


<p dir="auto">This is useful for example when building complex forms and we want to warn a user before he leaves the page without submitting.</p>
<h2 dir="auto">Your Environment</h2>

<p dir="auto">ANY</p>