<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">Do not allow exporting an entry in <code class="notranslate">exportPathMap</code> that does not start with a backslash<br>
-or-<br>
Ensure that the page template defined in an <code class="notranslate">exportPathMap</code> entry either starts with <em>or is preprended with</em> a backslash to ensure operability.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Using a <code class="notranslate">page</code> value in a path exported from <code class="notranslate">exportPathMap</code> that does not start with a backslash <code class="notranslate">/</code> results in an error on the client when it attempts to retrieve <code class="notranslate">/_next/:buildID/pagemytemplate</code> instead of <code class="notranslate">/_next/:buildID/page/mytemplate</code>. Because of this functionality, a brief 404 will displayed, then replaced with the actual page request.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Export a path in <code class="notranslate">exportPathMap</code> with a <code class="notranslate">page</code> value that does not start with a backslash.</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">This resulted in unexpected 404's, and was a very silent error.</p>
<p dir="auto">In example code about external stylesheet <a href="https://github.com/zeit/next.js/tree/master/examples/with-global-stylesheet">https://github.com/zeit/next.js/tree/master/examples/with-global-stylesheet</a> , it still has <code class="notranslate">dangerouslySetInnerHTML</code>. According to this <code class="notranslate">styled-jsx</code> improvement` <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="213640408" data-permission-text="Title is private" data-url="https://github.com/vercel/styled-jsx/issues/148" data-hovercard-type="pull_request" data-hovercard-url="/vercel/styled-jsx/pull/148/hovercard" href="https://github.com/vercel/styled-jsx/pull/148">vercel/styled-jsx#148</a>, we can reference  imported stylesheet now.</p>
<p dir="auto">I tried to change code and it works.</p>
<div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" export default () =&gt;
   &lt;div&gt;
-    &lt;style dangerouslySetInnerHTML={{ __html: stylesheet }} /&gt;
+    &lt;style jsx global&gt;{stylesheet}&lt;/style&gt;
     &lt;p&gt;ciao&lt;/p&gt;
   &lt;/div&gt;"><pre class="notranslate"> export default () =&gt;
   &lt;div&gt;
<span class="pl-md"><span class="pl-md">-</span>    &lt;style dangerouslySetInnerHTML={{ __html: stylesheet }} /&gt;</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>    &lt;style jsx global&gt;{stylesheet}&lt;/style&gt;</span>
     &lt;p&gt;ciao&lt;/p&gt;
   &lt;/div&gt;</pre></div>
<p dir="auto">The <code class="notranslate">dangerouslySetInnerHTML</code> does not look right and might trigger eslint error. If my understanding is right, I'll submit a PR for this.</p>