How can I make <Link> work with the new rewrites feature?

[utkarshkukreti]

Hi,

I'm trying to use the new rewrites feature but I'm stuck on making <Link> work correctly with it.

Here's my config:

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

I have a page at /pages/news/[slug].js.

I tried these two ways to create a link to /blog/hello:

<Link href="/news/[slug]" as="/blog/hello">
  <a>/blog/hello</a>
</Link>


<Link href="/blog/[slug]" as="/blog/hello">
  <a>/blog/hello</a>
</Link>

The first one throws this error:

Error: The provided as value (/blog/hello) is incompatible with the href value (/news/[slug]). Read more: https://err.sh/vercel/next.js/incompatible-href-as

while the second one causes a full page reload.

Is there any way to make this link work like how normal links work (no full page reload)?

[ijjk]

Hi, you can make this work by using mis-matching href and as values and manually providing the dynamic route params. We're aiming to streamline this so this is no longer needed, but the below example should allow you to achieve this on the latest version of Next.js

<Link href="/news/[slug]" as="/news/hello">
  <a>/blog/hello</a>
</Link>


<Link href="/news/[slug]?slug=hello" as="/blog/hello">
  <a>/blog/hello</a>
</Link>

[linkurzweg]

@ijjk Thanks so much! That works perfectly :) Looking forward to this being streamlined!

[utkarshkukreti]

Thanks a lot!