router.back() not working when going back between two dynamic routes

[DaniAkash]

What version of Next.js are you using?

10.2.2

What version of Node.js are you using?

14.15

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

vercel

Describe the Bug

I have a dynamic route in the following format:

/path/[type]

If i visit the following paths:
/path/custom1
/path/custom2

and then call router.back() from custom2 I get the following error message:

Unhandled Runtime Error
Error: The provided `as` value (/path/custom1) is incompatible with the `href` value (/h/[type]). Read more: https://nextjs.org/docs/messages/incompatible-href-as
Call Stack
Router._callee$
node_modules/next/dist/next-server/lib/router/router.js (1055:16)
tryCatch
node_modules/regenerator-runtime/runtime.js (63:14)
Generator.invoke [as _invoke]
node_modules/regenerator-runtime/runtime.js (293:0)
Generator.eval [as next]
node_modules/regenerator-runtime/runtime.js (118:0)
asyncGeneratorStep
node_modules/@babel/runtime/helpers/asyncToGenerator.js (3:0)
_next
node_modules/@babel/runtime/helpers/asyncToGenerator.js (25:0)

I use my app with a basepath. It is happening only when I have a basepath. My next.config.js file is:

module.exports = {
  basePath: "/app",
  future: {
    webpack5: true
  }
};

Given my application has lots of dynamic routes I'm unable to upgrade from 10.0 to 10.2.

Expected Behavior

The page should be able to go back from /path/custom2 to /path/custom1

To Reproduce

I have created a codesandbox with reproducable scenario:

https://znkfe.sse.codesandbox.io/app

If the buttons are followed, it will land on the issue.

Source: https://codesandbox.io/s/nextjs-routing-issue-znkfe?file=/pages/index.js

[m235]

same here in production since 10.1 or 10.2

The provided as value (/product/204714/34501608) is incompatible with the href value (/oduct/[saleId]/[itemId]). Read more: https://nextjs.org/docs/messages/incompatible-href-as

Not linked to a Link or router.push but this error is happening when browsing back the history (navigator back button for example)

[m235]

BTW I also have a base path 3 chars long (/gr) look like a wrong splice somewhere because /product become /oduct

[TanDung2512]

Same here, It works well on 10.2 until I upgrade to 10.2.2. My case is that I have a rewrite path.
{ source: '/(.*)post:id.html', destination: '/content/detail/:id', }

[PaulSenon]

Same here, I was about to open an issue but I found yours.

The problem appears between v10.2.1-canary.6 and v10.2.1-canary.7.
It might be related to this commit: 5bff9ea

It breaks my website so I had to rollback to 10.2.1 :(

I also prepared something to reproduce the issue here:
https://stackblitz.com/edit/bug-nextjs-router-back-as-path?file=next.config.js
(everything is explained on landing page)

hope it will be fixed for 11.0.0, I'm so exited to try the incoming new features :D

[PaulSenon]

I'm sorry for reopening this closed issue but it seems it hasn't totally fixed the problem :'(

I updated the reproduction url with latest v10.2.4-canary.0 containing this fix, but the bug is still here.

Here is the updated example project to reproduce the bug:
https://stackblitz.com/edit/bug-nextjs-router-back-as-path?file=next.config.js

I also forked and updated the example from @DaniAkash that still show the same issue:

• demo: https://tmg8g.sse.codesandbox.io/app
• source: https://codesandbox.io/s/nextjs-routing-issue-forked-tmg8g?file=/pages/index.js

If I can help providing some more infos, I'd love to.

[UPDATE] I suppose we need another ticket, not yet closed, so I commented under a new one I found mentionning this issue: #25490

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.