<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">I have a Next.JS app with Express routing. Locally, my code works as expected, however when I deploy the code, I get a different behavior that breaks the site.</p>
<p dir="auto">Locally, I get a 200 from the API I'm calling, and I display the correct page. However, when I deploy this exact same code to an Azure app service inside a Docker container, the behavior is different and causes 404s.</p>
<p dir="auto">I hit this URL in both local and deployed scenarios: <code class="notranslate">&lt;host&gt;/research/US/Employer=7-Eleven%2c_Inc./Hourly_Rate</code>.</p>
<p dir="auto">I have these lines of code to log information about the <code class="notranslate">req</code> object passed in from the Express router.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="console.log(`req.originalUrl: ${req.originalUrl}`);
console.log(`req.url: ${req.url}`);
console.log(`req.path: ${req.path}`);"><pre class="notranslate"><code class="notranslate">console.log(`req.originalUrl: ${req.originalUrl}`);
console.log(`req.url: ${req.url}`);
console.log(`req.path: ${req.path}`);
</code></pre></div>
<p dir="auto">Locally, my logging produces this (this is the desired behavior):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="req.originalUrl: /research/US/Employer=7-Eleven%2c_Inc./Hourly_Rate
req.url: /research/US/Employer=7-Eleven%2c_Inc./Hourly_Rate
req.path: /research/US/Employer=7-Eleven%2c_Inc./Hourly_Rate
path: /research/US/Employer=7-Eleven%2c_Inc./Hourly_Rate"><pre class="notranslate"><code class="notranslate">req.originalUrl: /research/US/Employer=7-Eleven%2c_Inc./Hourly_Rate
req.url: /research/US/Employer=7-Eleven%2c_Inc./Hourly_Rate
req.path: /research/US/Employer=7-Eleven%2c_Inc./Hourly_Rate
path: /research/US/Employer=7-Eleven%2c_Inc./Hourly_Rate
</code></pre></div>
<p dir="auto">In Azure, it produces this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="req.originalUrl: /research/US/Employer=7-Eleven,_Inc./Hourly_Rate
req.url: /research/US/Employer=7-Eleven,_Inc./Hourly_Rate
req.path: /research/US/Employer=7-Eleven,_Inc./Hourly_Rate"><pre class="notranslate"><code class="notranslate">req.originalUrl: /research/US/Employer=7-Eleven,_Inc./Hourly_Rate
req.url: /research/US/Employer=7-Eleven,_Inc./Hourly_Rate
req.path: /research/US/Employer=7-Eleven,_Inc./Hourly_Rate
</code></pre></div>
<p dir="auto">The difference being: the comma in the url is encoded locally, but not when deployed.</p>
<p dir="auto">To eliminate the possibility that Docker is a cause of this, I pulled the Docker image the Azure App Service is pointing to, and ran it locally. That runs without a problem, and behaves as my local app behaves.</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">I expect both the local and the deployed app to log the same thing when given the same URL.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: all (but I'm using Mac)</li>
<li>Browser: all (but I'm using Chrome)</li>
<li>Version of Next.js:  7.0.2</li>
<li>Version of Express: 4.16.4</li>
<li>Version of Node locally: 11.9.0</li>
<li>Version of Node in Docker container: 10.15.1</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">More like desired behavior; but it would be nice if a customScroll event could be passed by the user when executing shallow routing if the default scroll event provided by <code class="notranslate">next</code> <a href="https://github.com/zeit/next.js/blob/v3-beta/lib/router/router.js#L269">here</a> is not the desired effect.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">At the moment if trying to create your own custom scroll events or if using a third party library the scroll events will either be ignored or the scroll event being used by <code class="notranslate">next</code> takes precedence leading to two scroll events happening.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Please see this <a href="https://github.com/rockchalkwushock/custom-scroll">repo</a> for demo &amp; a proposed solution (albeit probably not the greatest idea)</p>
<h2 dir="auto">Context</h2>


<p dir="auto">Really wanting shallow routing for a website I'm building with a scrolling layout. I'm using the <code class="notranslate">react-scroll</code> library to achiever the scrolling layout; but so far have found no concrete method for using the customScroll events being called by the library with the shallow routing feature in <code class="notranslate">next</code>.</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.0.1-beta.8</td>
</tr>
<tr>
<td>chrome</td>
<td>59.0.3071.115</td>
</tr>
<tr>
<td>node</td>
<td>8.1.3</td>
</tr>
<tr>
<td>macOS</td>
<td>10.12.5</td>
</tr>
</tbody>
</table>