Workaround for error with Link's 'as' and 'href' incompatible values

Viewed 360

I created the following page in my Next.js project: src/pages/brand1/[[...subpages]]. I'm using Incremental Static Regeneration, I have a .next/server/pages/brand1.json file after building the next.js project. In my component I want to create a Link component which when clicked, displays an URL with an empty path (for example page-domain.com) in the address bar and renders the page from /brand1 route (which uses brand1.json file). I tried various solutions to achieve this, for example:

<Link
  href={{
    pathname: '/brand1',
  }}
  as={'/'}
  shallow
>
  link
</Link>

But I get an error in the browser saying that Error: The provided 'as' value (/) is incompatible with the 'href' value (/brand1/[[...subpages]])

I have the following solution which works for urls with not empty subpages (for example page-domain.com/menu), but it doesn't work for the root page as I described earlier:

<Link
  href={{
    pathname: '/brand1/[[...subpages]]',
    query: { subpages: 'menu' },
  }}
  as={'/menu'}
  shallow
>
  link
</Link>

My question is how to create a link which can display URL with empty path like page-domain.com and gets the page from the /brand1 route?

0 Answers
Related