<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?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">I'm not entirely sure on the intended behaviour, but I expect all loaded JS to be cached. On my own site, as well as on at least <a href="https://nextjs.org/learn" rel="nofollow">https://nextjs.org/learn</a>, the <code class="notranslate">/_next/static/commons/main-{hash}.js</code> file gets a <code class="notranslate">public, max-age=0</code> header.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">I'd expect all JS to get some sort of cache header that does not set the max-age to 0, as this seem to require my browser to download the file on every page load.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Open <a href="https://nextjs.org/learn" rel="nofollow">https://nextjs.org/learn</a> with devtools</li>
<li>Look at the cache header on the <code class="notranslate">/_next/static/commons/main-{hash}.js</code> request</li>
</ol>
<h2 dir="auto">Context</h2>


<p dir="auto">The result of not caching the <code class="notranslate">/_next/static/commons/main-{hash}.js</code> request results in waterfall requests. Even though etags can be applied, it seems that another round trip has to happen before code can be initialised.</p>
<p dir="auto">After looking through the code, it seems that no static assets are being sent with cache headers by default - is this intended? I've checked a version of my own project running Next 5.1 and the main bundle (which is handled differently in that version) appear to be cached properly.</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>6.0.0</td>
</tr>
<tr>
<td>node</td>
<td>10</td>
</tr>
<tr>
<td>OS</td>
<td>N/A</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">I think it would be great to have parameter in URL functionality (for example <code class="notranslate">/users/:id</code>) while still keeping the simplicity of <code class="notranslate">next</code> itself.</p>
<p dir="auto">My proposition is to do this for structure:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="pages/
  index.js
  users/
    _id.js"><pre class="notranslate"><code class="notranslate">pages/
  index.js
  users/
    _id.js
</code></pre></div>
<p dir="auto"><code class="notranslate">id.js</code> will be seen as a parameter path and will receive <code class="notranslate">id</code> as prop. You could also go further and make it like this to map <code class="notranslate">/users/:id/friends/:friendid</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="pages/
  index.js
  users/
    _id/
      index.js
      friends/
        _friendid.js"><pre class="notranslate"><code class="notranslate">pages/
  index.js
  users/
    _id/
      index.js
      friends/
        _friendid.js
</code></pre></div>
<p dir="auto">If the id is not specified (eg. <code class="notranslate">/users/</code>) then we'll first check if there is an <code class="notranslate">index.js</code> and otherwise use <code class="notranslate">_id.js</code>.</p>
<p dir="auto">I created this issue to see if others are interested in this and to see what everyones thoughts/feedback is on this. I'm willing to build this if this is a wanted feature! <g-emoji class="g-emoji" alias="smile" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f604.png">😄</g-emoji></p>