Client-side navigation and rewrites

[Thms-Brnrd]

Hi ! 👋

I try to build a Next.js app to display data about shows and episodes.
The app can be accessed at https://shows-list.now.sh, but some shows can be accessed by a specific URL. For example, https://awesome-show.now.sh display data about the show awesome-show.

• https://shows-list.now.sh is a Next app with two pages :
  • [showSlug].js display data of a given show
  • [showSlug]/[episodeSlug].js display data of a given episode of the show
• https://awesome-show.now.sh should display data about a unique show :
  • https://awesome-show.now.sh is in some way an alias to https://shows-list.now.sh/awesome-show
  • https://awesome-show.now.sh/awesome-episode is an alias to https://shows-list.now.sh/awesome-show/awesome-episode

I configured Vercel to rewrites request from https://awesome-show.now.sh to https://shows-list.now.sh/awesome-show :

{
  "rewrites": [
    { "source": "/_next/(.*)", "destination": "https://shows-list.now.sh/_next/$1" },
    { "source": "/(.*)", "destination": "https://shows-list.now.sh/awesome-show/$1?isRewriting=true" }
  ]
}

This work greats for direct request but I try to add client-side navigation with those considerations.
Bascially, for https://awesome-show.now.sh, I try to add links to the page [showSlug]/[episodeSlug] without having the full URL /awesome-show/episode1 but only /episode1.
Using next/link, I tried this but have an error due to href and as mismatch :

{/* Error href and as mismatch */}
<Link href="/[showSlug]/[episodeSlug]" as="/episode1">
    <a>Episode 1</a>
</Link>

I found a workaround to this error, based on the PR #9837, navigation is done to the correct page, the URL is good but props passed to the page are wrong :

{/* Based on https://github.com/vercel/next.js/pull/9837/files */}
{/* Episode page is used but "episode2" is used as the showSlug, not the episodeSlug */}
<Link href={`/[showSlug]/[episodeSlug]?showSlug=${showSlug}&episodeSlug=episode2`} as="/episode2">
    <a>Episode 2</a>
</Link>

episode2 is passed as the prop showSlug instead of episodeSlug and episodeSlug is undefined.

How to perform client-side navigation with this usage of rewrites ? Is there a way to achieve this with next/link ? If not, what are the alternatives to have the same behaviour (one domain to a global Next.js app + specific domain to a sub-section of the app) ?

If needed, the code of https://shows-list.now.sh is accessible at https://github.com/Thms-Brnrd/shows-list and https://awesome-show.now.sh at https://github.com/Thms-Brnrd/awesome-show.

Thank you ! 😄