How to go to overlapping predefined route instead of dynamic using Router.push?

[nlopin]

Hello, the community!

I'm implementing a multi-step form with submission between steps. That makes it impossible to use Link component for navigation between steps. I use imperative router.push.

I have a bunch of dynamic paths, that handle the regular path of a user, but for certain paths I want to show a custom page. For that, I added a more specific path that overlaps with the dynamic:

- [country]/
    - [type]/
         - step1.js
         - step4.js
         - step5.js
         - confirmation.js
    - awesomeType/
         - step5.js

So when a user moves from /[country]/[type]/step4 to the next step, I want nextjs to use more specific path /[county]/awesomeType/step5 instead of /[country]/[type]/step5.

I tried the following, none works as expected:

1. Call router.push(page, as); with the most dynamic page. Of course, it leads to this page to be opened
2. Call router.push(as);, where the as is the destination URL. It tries to request the static page from nextjs because it is considered as the page name. Then the entire page reloads and shows the target state.

❓ Is there a known way to achieve the described behavior or it is considered bad practice?

[otterlistic]

Can you explain why you have [type]/step5 if you want to navigate to /awesomeType/step5 after step4?

[nlopin]

For example, step5 contains a component that draws a list of documents. But awesomeType the set of documents is way different.

Of course, I can put that logic to the page itself, but I'd prefer to be declarative by having a less dynamic route. The advantage of this is you see all the specific cases right into the project tree without diving into the code.