Invariant: attempted to hard navigate to the same URL (Rewrites inside next.config.mjs)

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Deployed to Vercel

      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 16.13.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.2.6-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

Not relevant

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

When creating rewrites from next.config.mjs, that include a trailing slash in the source, and/or rewriting from a source to a destination with a slug { source: "/test/", destination: "/test/1/" } will cause errors in production that will cause the page to reload and throws an error.

Errors:
Failed to lookup route: /
The provided 'as' value (/test/) is incompatible with the 'href' value (/test/[slug])
Invariant: attempted to hard navigate to the same URL /

On the minimal reproduction, errors can be seen when clicking on the home button twice. For the first group of links 1,3,4 (links 2, 2.5 apparently work because /test.js file actually exists) It appears as though a root index file is needed in a folder that has a dynamic route in order to prevent the errors from occurring even though the path should be getting rewritten to the dynamic destination.

The second "fix" is from removing the trailing slash from the source. I have no idea why removing the trailing slash from the rewrite source prevents the errors above from happening but I wouldn't really call that a solution to the problem as you can't really remove the trailing slash from the home page '/'. You can see that removing the trailing slash does not throw errors in the reproduction with the second group of links.

In development, the network tab shows that the router is requesting the wrong JavaScript file for the page and seems to be ignoring the rewrite from the manifest (Cannot be seen in Vercel reproduction).
I believe whatever is causing this bug is the same bug for https://github.com/vercel/next.js/issues/38171 as it follows a similar premise using rewrites and in development, an extra page.js fetch can be seen before the page reload with a Failed to load script: /_next/static/chunks/pages/test.js error.

Expected Behavior

Should work the same way as 12.1.4 where rewrites do not throw errors on page load.

Link to reproduction

https://next-12-2-4-rewrite-bug.vercel.app

To Reproduce

Minimal reproduction repo: https://github.com/grayaustinc/next-12.2.4-rewrite-bug (is now on version: next@canary)
Create rewrites in next.config.mjs where the source does not contain the slug (with a trailing slash) and the destination with the slug included.
{ source: "/test/", destination: "/test/1/" }
More simply, a source/destination for the home page
{ source: "/", destination: "/home/" }

Start with the next.config.mjs rewrite definitions and the minimal reproduction repository, then reproduce the trailing-slash and dynamic-destination cases in the listed Next.js canary environment. Trace the route lookup and client navigation errors shown in the report; done means rewrites such as /test/ to /test/1/ and / to /home/ work without reloads or invariant errors, matching the expected 12.1.4 behavior.