<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">The SW-Precache demo should precache all .next folder's ressources?</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">The SW-Precache demo cache nothing.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Clone the repo</li>
<li>Go in the demo's folder <strong>with-sw-precache</strong></li>
<li>Run <code class="notranslate">npm build</code></li>
<li>The result is:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Using &quot;webpack&quot; config function defined in next.config.js.
Total precache size is about 0 B for 0 resources."><pre class="notranslate"><code class="notranslate">Using "webpack" config function defined in next.config.js.
Total precache size is about 0 B for 0 resources.
</code></pre></div>
<h2 dir="auto">Context</h2>


<p dir="auto">I would like to use sw-precache with NextJS</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>React</td>
<td>16.2</td>
</tr>
<tr>
<td>node</td>
<td>8.9.0</td>
</tr>
<tr>
<td>OS</td>
<td>MacOSX</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">I followed <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="201124877" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/799" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/799/hovercard" href="https://github.com/vercel/next.js/issues/799">#799</a> but couldn't get a clean way to have a styled-component link, I had to duplicate the href:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const StyledLink = styled.a`
  color: red;
  background: blue;
`

export default ({ href, name }) =&gt; (
  &lt;Link prefetch href={href}&gt;
    &lt;StyledLink href={href}&gt;{name}&lt;/StyledLink&gt;
  &lt;/Link&gt;
)"><pre class="notranslate"><code class="notranslate">const StyledLink = styled.a`
  color: red;
  background: blue;
`

export default ({ href, name }) =&gt; (
  &lt;Link prefetch href={href}&gt;
    &lt;StyledLink href={href}&gt;{name}&lt;/StyledLink&gt;
  &lt;/Link&gt;
)
</code></pre></div>
<p dir="auto">What's the proper way to make styled-component links?</p>
<p dir="auto">Using next.js 2.3.1.</p>