解决Next.js中Link组件'as'与'href'值不兼容问题：实现根路径URL渲染brand1路由页面

I've run into similar routing quirks with Next.js's catch-all dynamic routes and the as prop, so here's how you can fix this:

The key issue with your initial attempt is that when you use pathname: '/brand1', Next.js tries to resolve it to the [[...subpages]] file but can’t properly map the root as={'/'} to that implicit path. Instead, you need to explicitly reference the dynamic route file and pass an empty array for the subpages query parameter—since the optional catch-all [[...subpages]] route accepts empty values to match the base /brand1 path.

Here's the working Link component:

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

Why this works: #

• By specifying the exact dynamic route file path (/brand1/[[...subpages]]), you’re telling Next.js exactly which page component to use.
• Passing subpages: [] matches the base /brand1 route, which corresponds to the brand1.json static file generated during your ISR build.
• The as={'/'} prop overrides the displayed URL to the root path, while the underlying routing still points to the correct Brand1 page.

Note on shallow: #

Keep the shallow prop if you want to avoid re-fetching data or re-running getStaticProps/getServerSideProps on navigation. If you need the page to revalidate (since you’re using ISR), you can remove shallow—the URL will still display as / while rendering the Brand1 page.

This mirrors your working non-empty subpage approach, but uses an empty array instead of a string to target the base Brand1 route.

内容的提问来源于stack exchange，提问作者Jakub Knapik