Allow Incompatible HREF and AS values

Feature request

Is your feature request related to a problem? Please describe.

To allow for advanced usage of routing we currently have the capability to use Link and router.push/replace with unmatched/incompatible href and as values. For example, we are able to do the following:

Router.push(`/user?photoId=${id}`, `/user/photo?id=${id}`)

This allows developers to implement advanced routing UX such as instagram style modals, where a modal can open on the same page but also have a dedicated page.

The current challenge is that when a dynamic element is added to the values an error is emitted noting incompatible href and as values - https://github.com/zeit/next.js/blob/master/errors/incompatible-href-as.md For example:

Router.push(`/[user]?photoId=${id}`, `/user/photo?id=${id}`)

Describe the solution you’d like

The reason this error is produced is due to the following section of code, which checks both values match: https://github.com/zeit/next.js/blob/69b7538dce2fa8853bccfa2f65c8c305d76daae3/packages/next/next-server/lib/router/router.ts#L319

On removing this check all routing functions as expected (including the dynamic route) and all tests still pass. For this reason I would like to request that this section of code is reviewed and potentially removed.

Describe alternatives you’ve considered

An alternative solution is to allow a flag that disables this route match check, potentially reducing features for this situation and/or allowing for an at risk implementation (if there is a risk introduced when removing this route match check)

Additional context

I have forked an instagram clone, updating the next package to the latest version and introduced a dynamic route. When disabling the section of code noted above all routing functionality works as expected: https://github.com/tomevans18/nextagram

I have also forked next.js and commented out the section of code noted above. When running the tests against this repo, all routing tests pass: https://github.com/tomevans18/next.js

If there is any additional investigation work that needs to be done to help this feature happen please let me know and I will be happy to oblige.

[Timer]

Supported in ^9.2.1-canary.6. Please give it a try!

[philgruneich]

Fixed by changing the structure of the link to:

<Link href={`/project/post?id=${id}`} as={`${PREFIX}/project/post/${id}`} passHref>
  <Button>Example</Button>
</Link>