<h1 dir="auto">Bug report</h1>
<p dir="auto">When using experimental dynamic routes (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="448612428" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/7432" data-hovercard-type="pull_request" data-hovercard-url="/vercel/next.js/pull/7432/hovercard" href="https://github.com/vercel/next.js/pull/7432">#7432</a>) in a <a href="https://nextjs.org/docs#multi-zones" rel="nofollow">zoned</a> app. I get this error in the browser:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Your `&lt;Link&gt;`'s `as` value is incompatible with the `href` value. This is invalid"><pre class="notranslate"><code class="notranslate">Your `&lt;Link&gt;`'s `as` value is incompatible with the `href` value. This is invalid
</code></pre></div>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">In order to find the query parameters, <code class="notranslate">href</code> and <code class="notranslate">as</code> are matched against each other. But the current implementation seems to be too strict.</p>
<p dir="auto">see <a href="https://github.com/zeit/next.js/blob/21fae5262f2dada7a229e6dd2831639d330ff746/packages/next-server/lib/router/router.ts#L274-L281">https://github.com/zeit/next.js/blob/21fae5262f2dada7a229e6dd2831639d330ff746/packages/next-server/lib/router/router.ts#L274-L281</a></p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">See <a href="https://github.com/Xiphe/next-dynamic-route-in-zone">https://github.com/Xiphe/next-dynamic-route-in-zone</a></p>
<ol dir="auto">
<li>Create a next app</li>
<li>Add a proxy to have it mounted on a subpath (like <code class="notranslate">http://localhost:3000/foo</code>)</li>
<li>Add a index page and a dynamic page (like <code class="notranslate">pages/bar/$dyn.js</code>)</li>
<li>Try to link to the dynamic page from the index page
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Link href=&quot;/bar/$dyn&quot; as &quot;/foo/bar/baz&quot;&gt;&lt;a&gt;Baz&lt;/a&gt;&lt;/Link&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-v">Link</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/bar/$dyn"</span> <span class="pl-c1">as</span> <span class="pl-s">"/foo/bar/baz"</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>Baz<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>Link&gt;</pre></div>
</li>
<li>Click the link in the browser</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">I want to use dynamic routes in a zoned app, so the above <code class="notranslate">Link</code>-code should not throw.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
<li>Browser: chrome</li>
<li>Version of Next.js: 8.1.1-canary.43</li>
</ul>
<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto"><a href="https://github.com/zeit/next.js#multi-zones">Multi zones</a> is a great feature which allows to run multiple next.js apps on the same domain, but it doesn't allow to define a basepath which will be accepted by all parts of next.js. Since we are not able to namespace apps right now it is not possible to have the same names for pages in various apps.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">I want to be able to configure a <code class="notranslate">basepath</code> in the next.config.js file. Thanks to this configuration all parts of next.js (Router, Link, Static assets etc.) will be aware of the basepath and will automatically generate and match to the correct paths.</p>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">One alternative is to nest all desired pages into a folder which matches the basepath. This solves just one small issue with routing and is quite ugly because most of the my basepaths are not one level paths.<br>
The second alterantive is to configure a proxy in a way where the basepath is automatically removed before the request arrives into a next.js app and also implement a custom Link component which automatically adds basepath to all links. I just don't want to maintain custom fork of next.js. It doesn't make sense in my opinion.</p>
<h2 dir="auto">Additional context</h2>
<p dir="auto">The <code class="notranslate">assetPrefix</code> solution allows us to define a different prefix for each app. But as fair as I know it works only with different hosts.</p>
<h3 dir="auto">with-zones example</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.exports = {
  assetPrefix: NOW_URL ? `https://${alias}` : 'http://localhost:4000'
}"><pre class="notranslate"><code class="notranslate">module.exports = {
  assetPrefix: NOW_URL ? `https://${alias}` : 'http://localhost:4000'
}
</code></pre></div>
<p dir="auto">If I add a basepath to it everything fails</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.exports = {
  assetPrefix: NOW_URL ? `https://${alias}/account` : 'http://localhost:4000/account'
}"><pre class="notranslate"><code class="notranslate">module.exports = {
  assetPrefix: NOW_URL ? `https://${alias}/account` : 'http://localhost:4000/account'
}
</code></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/340649/44391236-949a8280-a52f-11e8-894b-5ea9e9e942c6.png"><img width="789" alt="screen shot 2018-08-21 at 10 47 08" src="https://user-images.githubusercontent.com/340649/44391236-949a8280-a52f-11e8-894b-5ea9e9e942c6.png" style="max-width: 100%;"></a></p>
<p dir="auto">In my opinion we should split it into 2 variables:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.exports = {
  assetPrefix: NOW_URL ? `https://${alias}` : 'http://localhost:4000',
  basepath: '/account'
}"><pre class="notranslate"><code class="notranslate">module.exports = {
  assetPrefix: NOW_URL ? `https://${alias}` : 'http://localhost:4000',
  basepath: '/account'
}
</code></pre></div>
<h2 dir="auto">Related issues</h2>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="231546851" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2072" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2072/hovercard" href="https://github.com/vercel/next.js/issues/2072">#2072</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="189274051" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/257" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/257/hovercard" href="https://github.com/vercel/next.js/issues/257">#257</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="236512549" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2289" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2289/hovercard" href="https://github.com/vercel/next.js/issues/2289">#2289</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="351281878" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/4969" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/4969/hovercard" href="https://github.com/vercel/next.js/issues/4969">#4969</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="313780461" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/4146" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/4146/hovercard" href="https://github.com/vercel/next.js/issues/4146">#4146</a></li>
</ul>