<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">All styled-components with their CSS attributes applied</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">All styled-components have their CSS class name, but, for any reason, some styled-components don't have their CSS attributes, then their styles will not be applied</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Enter to <a href="http://qa.approp.cl:3001" rel="nofollow">Testing site</a></li>
<li>In this first page, the styled-components is ok, but in the second page exist the problem</li>
<li>In the search input type: "Las Condes"</li>
<li>Internally I redirect with:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  Router.push({
      pathname: '/results',
      { page: 1, lat: -33.3989812, lng: -70.5573124, operation: 'arriendo' },
    });"><pre class="notranslate"><code class="notranslate">  Router.push({
      pathname: '/results',
      { page: 1, lat: -33.3989812, lng: -70.5573124, operation: 'arriendo' },
    });
</code></pre></div>
<ol start="5" dir="auto">
<li>In the Results page, the rigth component style is wrong:</li>
</ol>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3875593/36064636-c0efa6da-0e6c-11e8-985c-cdafdaf879e4.png"><img width="903" alt="screen shot 2018-02-10 at 2 13 05 pm" src="https://user-images.githubusercontent.com/3875593/36064636-c0efa6da-0e6c-11e8-985c-cdafdaf879e4.png" style="max-width: 100%;"></a></p>
<p dir="auto">And the login modal buttons is ok:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3875593/36064697-632b3ae0-0e6d-11e8-98fe-68661b2a79ab.png"><img width="394" alt="screen shot 2018-02-10 at 2 19 37 pm" src="https://user-images.githubusercontent.com/3875593/36064697-632b3ae0-0e6d-11e8-98fe-68661b2a79ab.png" style="max-width: 100%;"></a></p>
<ol start="6" dir="auto">
<li>If reload the results page, (for a unkwnow reason) the right component is ok, but modal login button is wrong.</li>
</ol>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3875593/36064716-8ebcef28-0e6d-11e8-9f31-cfed3a917a07.png"><img width="579" alt="screen shot 2018-02-10 at 2 21 04 pm" src="https://user-images.githubusercontent.com/3875593/36064716-8ebcef28-0e6d-11e8-9f31-cfed3a917a07.png" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3875593/36064717-8edb8654-0e6d-11e8-9776-d2d8de7d3d6c.png"><img width="381" alt="screen shot 2018-02-10 at 2 21 15 pm" src="https://user-images.githubusercontent.com/3875593/36064717-8edb8654-0e6d-11e8-9776-d2d8de7d3d6c.png" style="max-width: 100%;"></a></p>
<h2 dir="auto">Context</h2>


<p dir="auto">In my development environment all works. But after of the build the code <em>(next build)</em> the problem happens</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>7</td>
</tr>
<tr>
<td>OS</td>
<td>Linux</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>styled-components</td>
<td>^2.2.4</td>
</tr>
</tbody>
</table>
<p dir="auto">Moving forward, it will be possible to substitute <code class="notranslate">next start</code> in your programs with your own script, initialized without any wrappers. For example, <code class="notranslate">node index.js</code>.</p>
<p dir="auto">An example of such a script in its most basic form would be as follows:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const next = require('next')
const { createServer } = require('http')

// init next
const app = next(/* __dirname */) 
const handle = app.getRequestHandler()

// init normal http server
createServer(handle).listen(3000)"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">next</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'next'</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-kos">{</span> createServer <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'http'</span><span class="pl-kos">)</span>

<span class="pl-c">// init next</span>
<span class="pl-k">const</span> <span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-s1">next</span><span class="pl-kos">(</span><span class="pl-c">/* __dirname */</span><span class="pl-kos">)</span> 
<span class="pl-k">const</span> <span class="pl-s1">handle</span> <span class="pl-c1">=</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">getRequestHandler</span><span class="pl-kos">(</span><span class="pl-kos">)</span>

<span class="pl-c">// init normal http server</span>
<span class="pl-en">createServer</span><span class="pl-kos">(</span><span class="pl-s1">handle</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">listen</span><span class="pl-kos">(</span><span class="pl-c1">3000</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">This basically does nothing interesting, it's the equivalent of <code class="notranslate">next -p 3000</code>.</p>
<p dir="auto">An important observation: notice that the parameter passed to <code class="notranslate">next()</code> to initialize the app is not a config object, but a path. This is because the configuration will be conventionally located in a <code class="notranslate">next.config.js</code> file where a next project lives. Credit goes to @Compulves (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="187731663" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/222" data-hovercard-type="pull_request" data-hovercard-url="/vercel/next.js/pull/222/hovercard" href="https://github.com/vercel/next.js/pull/222">#222</a>) for this great contribution.</p>
<p dir="auto">This is crucial because even though we get to substitute the server code, we <em>don't break</em> existing and future useful next sub-commands. Especially <code class="notranslate">next build</code>, which makes deployment to production of your next apps so convenient, continues to work well even with both <code class="notranslate">node server.js</code> and <code class="notranslate">next start</code>.</p>
<h3 dir="auto">Custom routing</h3>
<p dir="auto">Next.js's <code class="notranslate">pages/</code> serves two purposes: to give you a super easy-to-use API for defining routes, but more importantly, to define different entry points for code splitting!</p>
<p dir="auto">I say more importantly because it should be (and will be) possible to completely override the default route mapping, by invoking <code class="notranslate">next/render</code> manually.</p>
<p dir="auto">The following example shows how you could point <code class="notranslate">/a</code> to <code class="notranslate">pages/b.js</code> and <code class="notranslate">/b</code> to <code class="notranslate">pages/a.js</code>, effectively changing the default routing behavior</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const next = require('next')
const render = require('next/render')
const { createServer } = require('http')
const { parse } = require('url')

// init next
const app = next(/* __dirname */) 
const handle = app.getRequestHandler()

// init normal http server
createServer((req, res) =&gt; {
  const { query, pathname } = parse(req.url, true)
  if ('/a' === pathname) {
    render(app, res, 'b', qry)
  } else if ('/b' === pathname) {
    render(app, req, res, 'a', query)
  } else {
    handle(req, res)
  }
}).listen(3000)"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">next</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'next'</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-s1">render</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'next/render'</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-kos">{</span> createServer <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'http'</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-kos">{</span> parse <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'url'</span><span class="pl-kos">)</span>

<span class="pl-c">// init next</span>
<span class="pl-k">const</span> <span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-s1">next</span><span class="pl-kos">(</span><span class="pl-c">/* __dirname */</span><span class="pl-kos">)</span> 
<span class="pl-k">const</span> <span class="pl-s1">handle</span> <span class="pl-c1">=</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">getRequestHandler</span><span class="pl-kos">(</span><span class="pl-kos">)</span>

<span class="pl-c">// init normal http server</span>
<span class="pl-en">createServer</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-kos">{</span> query<span class="pl-kos">,</span> pathname <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">parse</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">.</span><span class="pl-c1">url</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s">'/a'</span> <span class="pl-c1">===</span> <span class="pl-s1">pathname</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">render</span><span class="pl-kos">(</span><span class="pl-s1">app</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">,</span> <span class="pl-s">'b'</span><span class="pl-kos">,</span> <span class="pl-s1">qry</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s">'/b'</span> <span class="pl-c1">===</span> <span class="pl-s1">pathname</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">render</span><span class="pl-kos">(</span><span class="pl-s1">app</span><span class="pl-kos">,</span> <span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">,</span> <span class="pl-s">'a'</span><span class="pl-kos">,</span> <span class="pl-s1">query</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
    <span class="pl-s1">handle</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</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-en">listen</span><span class="pl-kos">(</span><span class="pl-c1">3000</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">In addition to the <code class="notranslate">render</code> method, we'll expose lower level render APIs, like <code class="notranslate">renderToHTML</code> and <code class="notranslate">renderError</code>, which work like <code class="notranslate">render</code> but don't do the automatic response handling. Those APIs are useful for building a caching layer, for example, which is really handy if you know that a certain component will <em>always</em> return the same HTML with given props.</p>
<p dir="auto">More complicated routes like <code class="notranslate">/posts/:id/tags</code> or even <code class="notranslate">/:anything</code> can be handled by just parsing the URL and passing the appropriate props as the last parameter of <code class="notranslate">render</code> (as seen in the example), by using something like <a href="https://www.npmjs.com/package/path-match" rel="nofollow">path-match</a></p>
<p dir="auto">This is an example of how you do a catch all route, so that every request to <code class="notranslate">/catch/*</code> goes to a page <code class="notranslate">pages/my/page.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const next = require('next')
const render = require('next/render')
const { createServer } = require('http')
const { parse } = require('url')

// init next
const app = next(/* __dirname */) 
const handle = app.getRequestHandler()

// set up routes
const match = require('path-match')()
const route = match('/catch/:all')

// init normal http server
createServer((req, res) =&gt; {
  const { query, pathname }  = parse(req.url, true)
  const params = match(pathname);
  if (false === params) {
    // handle it with default next behavior
    handle(req, res)
  } else {
    // renders `pages/my/page.js`
    render(app, req, res, 'my/page', query)
  }
}).listen(3000)"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">next</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'next'</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-s1">render</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'next/render'</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-kos">{</span> createServer <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'http'</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-kos">{</span> parse <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'url'</span><span class="pl-kos">)</span>

<span class="pl-c">// init next</span>
<span class="pl-k">const</span> <span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-s1">next</span><span class="pl-kos">(</span><span class="pl-c">/* __dirname */</span><span class="pl-kos">)</span> 
<span class="pl-k">const</span> <span class="pl-s1">handle</span> <span class="pl-c1">=</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">getRequestHandler</span><span class="pl-kos">(</span><span class="pl-kos">)</span>

<span class="pl-c">// set up routes</span>
<span class="pl-k">const</span> <span class="pl-s1">match</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path-match'</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-s1">route</span> <span class="pl-c1">=</span> <span class="pl-s1">match</span><span class="pl-kos">(</span><span class="pl-s">'/catch/:all'</span><span class="pl-kos">)</span>

<span class="pl-c">// init normal http server</span>
<span class="pl-en">createServer</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-kos">{</span> query<span class="pl-kos">,</span> pathname <span class="pl-kos">}</span>  <span class="pl-c1">=</span> <span class="pl-en">parse</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">.</span><span class="pl-c1">url</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span>
  <span class="pl-k">const</span> <span class="pl-s1">params</span> <span class="pl-c1">=</span> <span class="pl-s1">match</span><span class="pl-kos">(</span><span class="pl-s1">pathname</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">false</span> <span class="pl-c1">===</span> <span class="pl-s1">params</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c">// handle it with default next behavior</span>
    <span class="pl-s1">handle</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
    <span class="pl-c">// renders `pages/my/page.js`</span>
    <span class="pl-s1">render</span><span class="pl-kos">(</span><span class="pl-s1">app</span><span class="pl-kos">,</span> <span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">,</span> <span class="pl-s">'my/page'</span><span class="pl-kos">,</span> <span class="pl-s1">query</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-en">listen</span><span class="pl-kos">(</span><span class="pl-c1">3000</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">The idea here is that we retain the smallest possible API surface, minimize the number of dependencies you have to install and code to evaluate.</p>
<p dir="auto">Fancy routing approaches vary widely, and we don't want to lock you in to a particular one. It should be entirely possible to implement <code class="notranslate">express</code> instead of <code class="notranslate">http.createServer</code>, for example.</p>