<p dir="auto">I feel like I might be missing something obvious, but I'm having trouble running my statically exported Next.js app on a sub-folder. Or in other words, this is what I basically want to do:</p>
<ol dir="auto">
<li>Run <code class="notranslate">next build &amp;&amp; next export -o dist</code> to create a <code class="notranslate">&lt;proj_root&gt;/dist</code> directory with my static bundle.</li>
<li>The user's browser requests should have the following behaviour:
<ul dir="auto">
<li><code class="notranslate">http://example.com/portal</code> will serve <code class="notranslate">/dist/index.html</code></li>
<li><code class="notranslate">http://example.com/portal/orders</code> will serve <code class="notranslate">/dist/orders/index.html</code></li>
<li>this tag: <code class="notranslate">&lt;img src="/static/image.jpg" /&gt;</code> will serve up <code class="notranslate">/dist/static/image.jps</code></li>
</ul>
</li>
</ol>
<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">The problem</h2>
<p dir="auto">The problem with the naive approach is that the image request:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;img src=&quot;/static/image.jpg&quot; /&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">src</span>="<span class="pl-s">/static/image.jpg</span>" /&gt;</pre></div>
<p dir="auto">will end up trying to make a request to:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="http://example.com/static/image.jpg"><pre class="notranslate"><code class="notranslate">http://example.com/static/image.jpg
</code></pre></div>
<p dir="auto">instead of:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="http://example.com/portal/static/image.jpg"><pre class="notranslate"><code class="notranslate">http://example.com/portal/static/image.jpg
</code></pre></div>
<h2 dir="auto"><code class="notranslate">assetPrefix</code></h2>
<p dir="auto">One way of making this work is to add the following to my <code class="notranslate">next.config.js</code> file:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="assetPrefix: isProd ? &quot;/portal&quot; : &quot;&quot;"><pre class="notranslate"><code class="notranslate">assetPrefix: isProd ? "/portal" : ""
</code></pre></div>
<p dir="auto">But this means that if the NGINX configuration ever changes, I'll have to update the <code class="notranslate">assetPrefix</code> and deploy accordingly.</p>
<p dir="auto">This seems like a cross-cutting concern to me, especially since I was under the impression that a static bundle should be exportable with relative paths that would make it work anywhere.</p>
<p dir="auto">The router (NGINX in this case) is supposed to do all the work, but alas I don't have much experience with NGINX (and on this project the client has not disclosed his <code class="notranslate">nginx.conf</code> to me).</p>
<h2 dir="auto">Finally</h2>
<p dir="auto">Of course, this would all be easily solved if we used <code class="notranslate">http://portal.example.com</code> instead of <code class="notranslate">http://example.com/portal</code>, but this is not something I have a say in.</p>
<p dir="auto">Is there a recipe for making this work? Perhaps an example <code class="notranslate">nginx.conf</code> that works for this use-case? Or is this something that <strong>must</strong> be set in the <code class="notranslate">assetPrefix</code>. As far as I'm aware, I thought the <code class="notranslate">assetPrefix</code> was for CDNs primarily, and not for this use-case.</p>
<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">In some use cases, we have to set meta tags with the same name (See <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="323869700" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/4407" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/4407/hovercard" href="https://github.com/vercel/next.js/issues/4407">#4407</a> for an actual example of use case) . However, you cannot do that because of <code class="notranslate">next/head</code>'s duplication-filter feature.</p>
<p dir="auto">Although, thanks to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="312126200" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/4121" data-hovercard-type="pull_request" data-hovercard-url="/vercel/next.js/pull/4121/hovercard" href="https://github.com/vercel/next.js/pull/4121">#4121</a>, in the latest version of Next.js you can set multiple <code class="notranslate">article:tag</code> meta tag as long as they have unique keys, the tag name is hard-coded and you seem to have no way to add other meta tags to <code class="notranslate">ALLOWED_DUPLICATES</code>.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">It would be great if users can explicitly specify meta tag names to be allowed (e.g. by configuring <code class="notranslate">next.config.js</code>) .</p>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">Provide a way of whatever allow duplication (like specifying by environment variables) .</p>
<h2 dir="auto">Additional context</h2>
<p dir="auto">We are willing to send you a pull-request if the above concept is acceptable.</p>