title: Next.js - Shallow routing with dynamic routes
body: <p>When attempting shallow routing with a dynamic route in Next.js the page is refreshed and shallow ignored. Seems a lot of people are confused about this.</p>
  <p>Say we start on the following page</p>
  <pre class="lang-js prettyprint-override"><code>router.push(
    '/post/[...slug]',
    '/post/2020/01/01/hello-world',
    { shallow: true }
  );
  </code></pre>
  <p>Then we route to another blog post:</p>
  <pre class="lang-js prettyprint-override"><code>router.push(
    '/post/[...slug]',
    '/post/2020/01/01/foo-bar',
    { shallow: true }
  );
  </code></pre>
  <p><strong>This does not trigger shallow routing, the browser refreshes, why?</strong></p>
  <p>In the codebase its very clear that this is a feature:</p>
  <pre class="lang-js prettyprint-override"><code>// If asked to change the current URL we should reload the current page
  // (not location.reload() but reload getInitialProps and other Next.js stuffs)
  // We also need to set the method = replaceState always
  // as this should not go into the history (That's how browsers work)
  // We should compare the new asPath to the current asPath, not the url
  if (!this.urlIsNew(as)) {
    method = 'replaceState'
  }
  </code></pre>
  <p>I can achieve the same manually using <code>window.history.pushState()</code> although this would of course be a bad idea:</p>
  <pre class="lang-js prettyprint-override"><code>window.history.pushState({
    as: '/post/2020/01/01/foo-bar',
    url: '/post/[...slug]',
    options: { shallow: true }
  }, '', '/post/2020/01/01/foo-bar');
  </code></pre>
  <p>As the internal API of Next.JS could change at any time... I may be missing something... but why is shallow ignored in the case? Seems odd.</p>