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.

Say we start on the following page

router.push(

  '/post/[...slug]',

  '/post/2020/01/01/hello-world',

  { shallow: true }

);

Then we route to another blog post:

router.push(

  '/post/[...slug]',

  '/post/2020/01/01/foo-bar',

  { shallow: true }

);

This does not trigger shallow routing, the browser refreshes, why?

In the codebase its very clear that this is a feature:

// 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'

}

I can achieve the same manually using window.history.pushState() although this would of course be a bad idea:

window.history.pushState({

  as: '/post/2020/01/01/foo-bar',

  url: '/post/[...slug]',

  options: { shallow: true }

}, '', '/post/2020/01/01/foo-bar');

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.