<p dir="auto">I'd like to be able to host a next.js app on it's own base path (e.g. <code class="notranslate">/some/base/path/</code> - on a configurable http proxy). This is primarily for use with <a href="https://github.com/jupyterhub/jupyterhub">JupyterHub</a> to run as a separate service (on e.g. <code class="notranslate">/services/nextApp</code>). I've gotten everything to work for the express app (that uses next handlers underneath) as well as the frontend's handling of the paths (the <code class="notranslate">req.params -&gt; query -&gt; page/component</code> are awesome with next.js).</p>
<p dir="auto">The only issue I'm running into is that <code class="notranslate">_next</code> is assumed to be at the absolute path of <code class="notranslate">/_next</code> when it needs to be able to be served at <code class="notranslate">/some/base/path/_next</code>.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const app = next({ dev, baseURL: '/asdf' });"><pre class="notranslate"><code class="notranslate">const app = next({ dev, baseURL: '/asdf' });
</code></pre></div>
<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>
<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">Expected Behavior</h2>


<p dir="auto">I'd expect sourcemaps of a basic module to enable breakpoint selection on all lines, except those clearly represented differently through transpilation.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">A basic component is not debuggable with sourcemaps: clicking on a line to set a breakpoint does not set a breakpoint at that line.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Example: <a href="https://github.com/tmcw/next-sourcemap-breakage-example">https://github.com/tmcw/next-sourcemap-breakage-example</a></li>
</ol>
<p dir="auto">Single page with the source:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component} from &quot;react&quot;;
export default class Button extends Component {
  render() {
    function foo() {
      console.log(1);
    }
    return &lt;button onClick={foo}&gt;hi&lt;/button&gt;
  }
};"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-v">Component</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">Button</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">function</span> <span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">foo</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>hi<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Setting a breakpoint on the line</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="      console.log(1);"><pre class="notranslate">      <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Is not possible:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/32314/30833972-fc1c7784-a205-11e7-91ec-ec99624c5852.gif"><img src="https://user-images.githubusercontent.com/32314/30833972-fc1c7784-a205-11e7-91ec-ec99624c5852.gif" alt="next-bug" data-animated-image="" style="max-width: 100%;"></a></p>
<h2 dir="auto">Context</h2>


<p dir="auto">This makes debugging applications quite difficult.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>3.2.2</td>
</tr>
<tr>
<td>node</td>
<td>8.4.0</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.12.6</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome 61.0.3163.100</td>
</tr>
</tbody>
</table>