<p dir="auto">I'm am using <code class="notranslate">styled-components</code> in <strong>Next.js</strong>. When I deploy the app, the first time the UI is rendered, it is unstyled. Only after a refresh does the SSR styles come through and persist.</p>
<p dir="auto"><strong>Implementation based on:</strong><br>
<a href="https://github.com/zeit/next.js/tree/canary/examples/with-styled-components">https://github.com/zeit/next.js/tree/canary/examples/with-styled-components</a></p>
<p dir="auto"><em>Anyone have ideas?</em> I'm stumped atm :(<br>
<a href="https://github.com/stephencorwin/nextjs-hello-world/tree/styled-components-ssr-error">https://github.com/stephencorwin/nextjs-hello-world/tree/styled-components-ssr-error</a></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">When I deploy the app, any SSR styles should be rendered the first refresh.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">When I deploy the app, the first time the UI is rendered, it is unstyled. Only after a refresh does the SSR styles come through and persist.</p>
<p dir="auto"><strong>First Render:</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3931162/36180289-bc0e0e12-10ed-11e8-91be-9d0b7dfbc217.PNG"><img src="https://user-images.githubusercontent.com/3931162/36180289-bc0e0e12-10ed-11e8-91be-9d0b7dfbc217.PNG" alt="render-error" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Second Render:</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3931162/36180308-d0ab5ad2-10ed-11e8-997a-a7b8f46c82af.PNG"><img src="https://user-images.githubusercontent.com/3931162/36180308-d0ab5ad2-10ed-11e8-997a-a7b8f46c82af.PNG" alt="render-success" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li><a href="https://deploy.now.sh/?repo=https://github.com/stephencorwin/nextjs-hello-world/tree/styled-components-ssr-error" rel="nofollow"><img src="https://camo.githubusercontent.com/73be09dddcc07644377c330a0727c02d96c8be6b9b2599949b932d1c7c241509/68747470733a2f2f6465706c6f792e6e6f772e73682f7374617469632f627574746f6e2e737667" alt="Deploy to now" data-canonical-src="https://deploy.now.sh/static/button.svg" style="max-width: 100%;"></a></li>
<li>Wait 2 mins for it to finish. Don't view the interstitial website with the progress status first.</li>
<li>Go to the website generated by Now <em>-- fantastic feature btw!!!</em></li>
<li>My <code class="notranslate">&lt;Header /&gt;</code>, <code class="notranslate">&lt;Footer /&gt;</code>, and <code class="notranslate">globalStyles()</code> in the <code class="notranslate">_document.js</code> are not coming through.</li>
<li>Refresh the page and you will notice the  styling has been fixed.</li>
</ol>
<h2 dir="auto">Context</h2>


<p dir="auto">When I deploy the app, I should NOT have to visit the website once to ensure that the SSR styles are generated.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>node</td>
<td>8.7.0</td>
</tr>
<tr>
<td>next</td>
<td>4.2.3</td>
</tr>
<tr>
<td>styled-components</td>
<td>3.1.6</td>
</tr>
<tr>
<td>babel-plugin-styled-components</td>
<td>1.5.0</td>
</tr>
<tr>
<td>OS</td>
<td>Windows 10</td>
</tr>
</tbody>
</table>
<p dir="auto">I changed the Next.js config to handle the structure like I wanted but, the generated css file won't load the same way.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const app = next({ dir: './src/', dev })"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-en">next</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">dir</span>: <span class="pl-s">'./src/'</span><span class="pl-kos">,</span> dev <span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">I load my css file like this</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;link rel=&quot;stylesheet&quot; href=&quot;/_next/static/style.css&quot; /&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">link</span> <span class="pl-c1">rel</span>="<span class="pl-s">stylesheet</span>" <span class="pl-c1">href</span>="<span class="pl-s">/_next/static/style.css</span>" /&gt;</pre></div>
<p dir="auto">When I put everything outside the src folder, like suggered, it works.</p>



<ul dir="auto">
<li>[x ] I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">My CSS file must load the same way if I specify a dir path or not.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const app = next({ dir: './src/', dev })"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-en">next</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">dir</span>: <span class="pl-s">'./src/'</span><span class="pl-kos">,</span> dev <span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">When I specify a dir path, Next won't load my CSS file compiled with @zeit/next-sass</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Change de dir option of Next.js server side</li>
<li>Use @zeit/next-sass and import a css file into a page</li>
<li>Add the file to an Head</li>
<li>The file won't load</li>
</ol>
<h2 dir="auto">Context</h2>


<p dir="auto">I'm trying to have a cleaner structure. I'm not a fan of all the things at the root level.</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>5</td>
</tr>
<tr>
<td>node</td>
<td>8.10</td>
</tr>
<tr>
<td>OS</td>
<td>OSX El Capitain V10.11.6</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 64.0.3282.186</td>
</tr>
</tbody>
</table>