Rewrites not working on client-side navigation in 12.2+

Verify canary release

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

Provide environment information

Binaries:
  Node: 14.20.0
  npm: 6.14.17
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.0.1-canary.0
  react: 18.2.0
  react-dom: 18.2.0

Describe the Bug

When using version 12.2 or higher, rewrites don’t work on client-side navigation anymore. It does work when visiting a url directly / refreshing the page. Initially reported in https://github.com/vercel/next.js/issues/38338.

Expected Behavior

Client-side navigations work the same as server-side page loads.

Link to reproduction

https://github.com/luukdv/next-bug

To Reproduce

• Clone https://github.com/luukdv/next-bug
• Run npm i && npm start
• Open http://localhost:3000
• Click “Visit this link”
• Click “Refresh the page”

[chrilis]

@luukdv Having the same issue (maybe related to #39638 and #39837) I found that replacing the trailing slash of the source with {/}? does fix the rewrites on client-side navigation.

{
-  source: "/pages/test/",
+  source: "/pages/test{/}?",
   destination: "https://example.com/",
}

I do not know if this is a bug or the documentation should be updated:

If you’re using trailingSlash: true, you also need to insert a trailing slash in the source parameter. If the destination server is also expecting a trailing slash it should be included in the destination parameter as well.

[chrilis]

For the home page we used /{/}?, which worked for us @luukdv. But not sure if that is actually a good idea.