<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">When I try update production project with 100+ pages and 10+ languages to Next.js 9.0.4 and move all my routes from <code class="notranslate">next-routes</code> to built-in dynamic routes found some issue on client side routing.</p>
<p dir="auto">In multi language sites in most cases we need to show locale code in the start of paths but with dynamic routes it cant be done right now, this will lead to an warning in console:<a href="https://github.com/zeit/next.js/blob/f41f630d19a1f87265fd77ae884b003d85915847/packages/next-server/lib/router/router.ts#L317">https://github.com/zeit/next.js/blob/f41f630d19a1f87265fd77ae884b003d85915847/packages/next-server/lib/router/router.ts#L317</a></p>
<p dir="auto">So if we have dynamic route like <code class="notranslate">/post/[id]</code> and try to build link component with <code class="notranslate">href="/post/[id]?locale=de"</code> and <code class="notranslate">as="/de/post/${id}"</code> we have warning in console after click on that link.</p>
<p dir="auto">As I understand this issue was appears because route created from href does not match regex created from <code class="notranslate">as</code>, but I dont quite understand how to fix it for dynamic routes.</p>
<p dir="auto">Need clear way to build multi language sites without using <code class="notranslate">next-routes</code>.</p>
<h2 dir="auto">To Reproduce</h2>
<ol dir="auto">
<li>Create dynamic route <code class="notranslate">/post/[id]</code>.</li>
<li>Create <code class="notranslate">&lt;Link /&gt;</code> component with <code class="notranslate">href="/post/[id]?locale=de"</code> and <code class="notranslate">as="/de/post/${id}"</code>.</li>
<li>Click on it and you will see warning in the console.</li>
</ol>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>Next.js 9.0.4</li>
</ul>
<p dir="auto"><em>Previously <a href="https://spectrum.chat/next-js/general/dynamic-routing-with-optional-parameters-how-to-avoid-two-bundles~27679250-3f59-4fa4-916d-3ff77a88fed1" rel="nofollow">a thread on Spectrum</a>.</em></p>
<p dir="auto">I need to support these routes:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/posts
/posts/1
/posts/2"><pre class="notranslate"><code class="notranslate">/posts
/posts/1
/posts/2
</code></pre></div>
<p dir="auto">As mentioned in the <a href="https://github.com/zeit/next.js/issues/7607" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/7607/hovercard">dynamic routing RFC</a>, a workaround can be implemented like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// pages/posts/[id].js
export default () =&gt; &lt;h1&gt;Post no. {router.query.id}&lt;/h1&gt;

// pages/posts.js
export { default } from './posts/[id]'"><pre class="notranslate"><span class="pl-c">// pages/posts/[id].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-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>Post no. <span class="pl-kos">{</span><span class="pl-s1">router</span><span class="pl-kos">.</span><span class="pl-c1">query</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>

<span class="pl-c">// pages/posts.js</span>
<span class="pl-k">export</span> <span class="pl-kos">{</span> <span class="pl-s1">default</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./posts/[id]'</span></pre></div>
<p dir="auto">However, as these are two entrypoints, it creates two bundles, so when I navigate to <code class="notranslate">/posts</code> and then to <code class="notranslate">/posts/1</code>, I am waiting for a new bundle to load.</p>
<p dir="auto">Ideally, there would be a way to tell Next.js that all the post-related routes should be handled by a single page component. We might need to wait for non-filesystem-based routing: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="476703219" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/8241" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/8241/hovercard" href="https://github.com/vercel/next.js/issues/8241">#8241</a>.</p>