<p dir="auto">Here's an example folder structure (as silly as it may be)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="pages/
  - subpage/
     - index.js
  - subpage.js"><pre class="notranslate"><code class="notranslate">pages/
  - subpage/
     - index.js
  - subpage.js
</code></pre></div>
<p dir="auto">If I have a <code class="notranslate">&lt;Link/&gt;</code> point to <code class="notranslate">/subpage/</code> the client will render the component from <code class="notranslate">subpage.js</code>, but when I refresh the page, I get the <code class="notranslate">subpage/index.js</code> file rendered.</p>
<p dir="auto">At first I noticed this was an issue with the server routing not working well if the path ends with a <code class="notranslate">/</code>, but then I realized that there are cases in which you may want an <code class="notranslate">index.js</code> in a folder, so it's not necessarily problematic that you get a <code class="notranslate">404</code> when you don't have the <code class="notranslate">index.js</code>.</p>
<p dir="auto">However, when there's a naming collision between a file and a folder, the client and the server behave differently and I think there should be a discussion around this situation, because I can't say there's a clear solution at this point.</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">I'm facing a really werid error in express that I have no idea what the reason is. I'm using <code class="notranslate">compression</code> package with a custom server</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const express = require('express')
const next = require('next')
const compression = require('compression')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
.then(() =&gt; {
  const server = express()
  server.use(compression())

  server.get('*', (req, res) =&gt; {
    return handle(req, res)
  })

  server.listen(port, (err) =&gt; {
    if (err) throw err
    console.log(`&gt; Ready on http://localhost:${port}`)
  })
})

This should work with no problem."><pre class="notranslate"><code class="notranslate">const express = require('express')
const next = require('next')
const compression = require('compression')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
.then(() =&gt; {
  const server = express()
  server.use(compression())

  server.get('*', (req, res) =&gt; {
    return handle(req, res)
  })

  server.listen(port, (err) =&gt; {
    if (err) throw err
    console.log(`&gt; Ready on http://localhost:${port}`)
  })
})

This should work with no problem.
</code></pre></div>

<h2 dir="auto">Current Behavior</h2>

<p dir="auto">It works with no errors until I open dev tools (only in chrome)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{ Error: Can't set headers after they are sent.
    at SendStream.headersAlreadySent (~/work/app/next.js/examples/custom-server-express/node_modules/send/index.js:390:13)
    at SendStream.send (~/work/app/next.js/examples/custom-server-express/node_modules/send/index.js:618:10)
    at onstat (~/work/app/next.js/examples/custom-server-express/node_modules/send/index.js:730:10)
    at FSReqWrap.oncomplete (fs.js:167:5) expose: false, statusCode: 500, status: 500 }"><pre class="notranslate"><code class="notranslate">{ Error: Can't set headers after they are sent.
    at SendStream.headersAlreadySent (~/work/app/next.js/examples/custom-server-express/node_modules/send/index.js:390:13)
    at SendStream.send (~/work/app/next.js/examples/custom-server-express/node_modules/send/index.js:618:10)
    at onstat (~/work/app/next.js/examples/custom-server-express/node_modules/send/index.js:730:10)
    at FSReqWrap.oncomplete (fs.js:167:5) expose: false, statusCode: 500, status: 500 }
</code></pre></div>

<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Clone the repo and use the <code class="notranslate">custom-server-express</code> folder</li>
<li>Add <code class="notranslate">compression</code> package and use it as a middleware</li>
<li>open chrome at localhost:3000</li>
<li>run the server (there's no error in the log, even refresh)</li>
<li>open Chrome dev (even with no extensions) and refresh</li>
<li>see the error (no error using Firefox).</li>
</ol>
<h2 dir="auto">Context</h2>


<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 or 5 both</td>
</tr>
<tr>
<td>node</td>
<td>9.2.0</td>
</tr>
<tr>
<td>OS</td>
<td>OSX 10.13.3</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome  64.0.3282.140</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>