<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">I created a <code class="notranslate">account</code> folder in the <code class="notranslate">pages</code> folder. And in this <code class="notranslate">account</code> folder, I added a <code class="notranslate">index.js</code> file.</p>
<p dir="auto">I would like to reach this page through <code class="notranslate">/account/</code>, but I get a 404 error. It is only reachable through <code class="notranslate">/account</code>.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">When I create a folder, I would like to be able to reach it with a trailing slash.</p>
<p dir="auto">trailing slash in link for legit page works for client side navigation but leads to not found bundle and 404 on hard refresh (ssr)</p>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">let me know if title needs further clarification.</p>
<p dir="auto"><a href="https://github.com/zeit/next.js/issues?q=is%3Aissue+trailing+slash+is%3Aclosed">all relevant issues</a> has been closed with reasoning that its been fixed in 6-canary (I believe it is not) or by improved serve (which is true only in perhaps production static export).</p>
<p dir="auto">I'm rewriting my existing blog to next.js and i previously used trailing slashes. Latest <code class="notranslate">serve</code> can help with it once i build my next.js powered blog. But in order to fix dev env i need either to get rid of trailing slashes and utilize <code class="notranslate">301 Moved Permanently</code> in prod; or live with broken trailing slash support in dev.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Here is minimal reproducible case (link to repro repo is below snippet):</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// pages/index.js
import Link from &quot;next/link&quot;;

export default () =&gt; (
  &lt;Link href=&quot;/about/&quot;&gt;
    &lt;a&gt;About&lt;/a&gt;
  &lt;/Link&gt;
);

// pages/index.js
export default () =&gt; &quot;about&quot;;"><pre class="notranslate"><span class="pl-c">// pages/index.js</span>
<span class="pl-k">import</span> <span class="pl-v">Link</span> <span class="pl-k">from</span> <span class="pl-s">"next/link"</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/about/"</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>About<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Link</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// pages/index.js</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s">"about"</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Minimal reproducible repo <a href="https://github.com/iamstarkov/next.js-trailing-slash-bug-demo">https://github.com/iamstarkov/next.js-trailing-slash-bug-demo</a></p>
<ol dir="auto">
<li>clone repo  <code class="notranslate">git clone https://github.com/iamstarkov/next.js-trailing-slash-bug-demo</code></li>
<li>change directory <code class="notranslate">cd next.js-trailing-slash-bug-demo</code></li>
<li>install deps <code class="notranslate">yarn</code></li>
<li>run dev: <code class="notranslate">yarn dev</code></li>
<li>open <a href="http://localhost:3000/" rel="nofollow">http://localhost:3000/</a></li>
<li>open devtools' network tab</li>
<li>observe <code class="notranslate">http://localhost:3000/_next/static/development/pages/about.js</code> being 200ed</li>
<li>observe <code class="notranslate">http://localhost:3000/_next/on-demand-entries-ping?page=/about/</code> being 200ed</li>
<li>observe <code class="notranslate">http://localhost:3000/about/</code> being 404ed</li>
<li>observe persistent attempts to resolve <code class="notranslate">http://localhost:3000/about/</code></li>
<li>observe in the terminal <code class="notranslate">Client pings, but there's no entry for page: /about/</code></li>
<li>refresh the page</li>
<li>observe 404 page.</li>
<li>remove trailing slash in the url or click <a href="http://localhost:3000/about" rel="nofollow">http://localhost:3000/about</a></li>
<li>observe page being 200ed</li>
<li>to ensure error persistence repeat steps 5-15 once.</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<ol dir="auto">
<li><code class="notranslate">/about/</code> shouldnt be resolved as <code class="notranslate">404 not found</code></li>
<li><code class="notranslate">/about/</code> should be resolved as <code class="notranslate">200 ok</code></li>
<li>Server should not print <code class="notranslate">Client pings, but there's no entry for page: /about/</code></li>
<li>both <code class="notranslate">/about</code> and <code class="notranslate">/about/</code> should work the same way</li>
</ol>
<h2 dir="auto">Screenshots</h2>
<p dir="auto">N/A</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS High Sierra 10.13.6 (17G65)</li>
<li>Browser (should not matter, but can repro'ed in chrome 69.0.3497.100 and safari Version 12.0 (13606.2.11) (was the same for safari 11)</li>
<li>Version of Next.js: 7.0.0 (could repro on 5.x and 6.x)</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">Add any other context about the problem here.</p>
<p dir="auto">If you change this code in <a href="https://github.com/zeit/next.js/blob/459c1c13d054b37442126889077b7056269eeb35/server/on-demand-entry-handler.js#L242-L249">https://github.com/zeit/next.js/blob/459c1c13d054b37442126889077b7056269eeb35/server/on-demand-entry-handler.js#L242-L249</a></p>
<p dir="auto">or <code class="notranslate">node_modules/next/dist/server/on-demand-entry-handler.js</code> locally</p>
<div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="          const { query } = parse(req.url, true)
          const page = normalizePage(query.page)
+         console.log('query.page', query.page);
+         console.log('page', page);
+         console.log('Object.keys(entries)', Object.keys(entries));
          const entryInfo = entries[page]

          // If there's no entry.
          // Then it seems like an weird issue.
          if (!entryInfo) {
            const message = `Client pings, but there's no entry for page: ${page}`"><pre class="notranslate">          const { query } = parse(req.url, true)
          const page = normalizePage(query.page)
<span class="pl-mi1"><span class="pl-mi1">+</span>         console.log('query.page', query.page);</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>         console.log('page', page);</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>         console.log('Object.keys(entries)', Object.keys(entries));</span>
          const entryInfo = entries[page]

          // If there's no entry.
          // Then it seems like an weird issue.
          if (!entryInfo) {
            const message = `Client pings, but there's no entry for page: ${page}`</pre></div>
<p dir="auto">and restart <code class="notranslate">next dev</code> and open <a href="http://localhost:3000/" rel="nofollow">http://localhost:3000/</a> and click about link then:</p>
<ul dir="auto">
<li>for <code class="notranslate">/about</code>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="query.page /about
page /about
Object.keys(entries) [ '/', '/about' ]"><pre class="notranslate"><code class="notranslate">query.page /about
page /about
Object.keys(entries) [ '/', '/about' ]
</code></pre></div>
</li>
<li>for <code class="notranslate">/about/</code>:
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="query.page /about/
page /about/
Object.keys(entries) [ '/', '/about' ]
Client pings, but there's no entry for page: /about/"><pre class="notranslate"><code class="notranslate">query.page /about/
page /about/
Object.keys(entries) [ '/', '/about' ]
Client pings, but there's no entry for page: /about/
</code></pre></div>
</li>
</ul>
<p dir="auto">I think the problem (at least part of it) is in inability of onDemandEntryHandler's middleware to find page in entries if page has trailing slash.</p>
<p dir="auto">I hope my 2 hours of investigation and preparation can help with fixing this issue.</p>