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?