next/link as prop throw an error with optional catch all routes using URL Object syntax

[cvolant]

Verify canary release

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

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #58-Ubuntu SMP Thu Oct 13 08:03:55 UTC 2022
Binaries:
  Node: 14.17.0
  npm: 6.14.13
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.3.2-canary.32
  eslint-config-next: N/A
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

All

How are you deploying your application? (if relevant)

Both next dev and next start

Describe the Bug

Given the following pages structure:

/pages
   L /news
        L [[...news]].js

And the following rewrite:

async rewrites() {
    return [
      {
        source: '/blog/:slug*',
        destination: '/news/:slug*',
      },
    ]
  }

This works (or seems to work but prefetch fails, see this issue: I get rid of it using URL Object syntax with non optional catch all routes, but... please read further):

<Link href="/news" as="/blog">Blog</Link>

But using URL Object syntax, it does not work at all:

<Link href={{ pathname: '/news/[[...slug]]' }} as="/blog">Blog</Link>

Neither this:

<Link href={{ pathname: '/news/[[...slug]]', query: { slug: [] } }} as="/blog">Blog</Link>

The last two throw the following error on click: Error: The provided `as` value (/blog) is incompatible with the `href` value (/news/[[...slug]]). Read more: https://nextjs.org/docs/messages/incompatible-href-as.

Expected Behavior

URL Object syntax should work as well as string synthax.

Link to reproduction

Github repo
Codesandbox
Codesandbox deployment

To Reproduce

Just visit the above Codesandbox deployment, and try the links.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.