<p dir="auto">I'm doing a demo with Nex.js, I got a problem with the path.<br>
First of all, I know there are "assetsPrefix", and i have no problem with static content, images, CSS or js. The problem is about the Link</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Link from 'next/link'
&lt;Link href=&quot;/about&quot;}&gt;.....&lt;/Link&gt;"><pre class="notranslate"><code class="notranslate">import Link from 'next/link'
&lt;Link href="/about"}&gt;.....&lt;/Link&gt;
</code></pre></div>
<p dir="auto">Everything is fine when i run the site in development mode via <code class="notranslate">npm run dev</code>, but the Link is go wrong when I export via <code class="notranslate">npm run export</code>.</p>
<p dir="auto">For example, I have set the assetsPrefix  in the next.config.js like the following</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const isProd = process.env.NODE_ENV === 'production'
{ 
assetPrefix: isProd ? 'http://localhost:8888/nextjs/demo' : null
}"><pre class="notranslate"><code class="notranslate">const isProd = process.env.NODE_ENV === 'production'
{ 
assetPrefix: isProd ? 'http://localhost:8888/nextjs/demo' : null
}
</code></pre></div>
<p dir="auto">In development mode, the link becomes <code class="notranslate">http://localhost:3000/about</code> that fine.</p>
<p dir="auto">In Exported static HTML, the link becomes <code class="notranslate">/about/</code>, after i click the link, the page url is changed to <code class="notranslate">http://localhost:8888/about</code>, actually I prefer <code class="notranslate">http://localhost:8888/next/demo/about</code>.</p>
<p dir="auto">That means the Link base URL is not controlled by "assetPrefix", doesn't it?</p>
<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>