Next.js/Sanity中动态Slug路由跳转失败问题求助

问题说明 #

在Next.js+Sanity项目中设置了两个动态路由：

• 分类图片画廊：pages/[slug].js
• 商店商品：pages/productSlug/[slugProduct].js

点击商品链接时触发错误：

Failed to reload dynamic routes: Error: You cannot use different slug names for the same dynamic path ('slug' !== 'slugProduct').

尝试将商品路由放入单独文件夹但未解决，链接代码存在路径错误。

错误原因 #

1. 路由层级冲突：若商品路由和分类路由处于同一层级（比如都在pages/下），Next.js会判定为同一路径的不同参数名，触发冲突。
2. 链接路径错误：原代码中Link的href指向根路径/${getProduct.slug.current}，会匹配到分类的[slug].js，而非商品的子路径路由。
3. 无效的a标签href：a标签里写本地文件路径../pages/productSlug/[slugProduct].js完全无效，会干扰Next.js的路由逻辑。

修复步骤 #

1. 确认路由文件夹结构
   确保商品路由位于子文件夹中，结构如下：

pages/
├─ [slug].js       # 分类画廊路由
└─ productSlug/
   └─ [slugProduct].js  # 商品路由

2. 修正Link组件的路径
   将商品链接的href改为子路径格式：/productSlug/${product.slug.current}，指向正确的商品路由。
3. 移除无效的a标签href
   Link组件已经负责路由跳转，a标签无需设置本地文件路径，仅保留标签本身即可。

修改后的代码示例 #

<ul className="products">
    {getProduct && getProduct.map((product, index) => (
        <Link href={`/productSlug/${product.slug.current}`} key={index}>
            <li>
                 <a>
                     <img 
                         src={urlFor(product.productImage).auto('format').url()} 
                         alt={product.productName}
                     />
                 </a>
                 <span className="product-name">{product.productName}</span>
                 <span className="product-price">${product.price}.00</span>
             </li>
         </Link>
     ))}
</ul>

补充说明 #

Next.js的动态路由规则是按文件夹层级区分路径，只要两个动态路由不在同一层级，即使参数名不同也不会冲突。确保链接路径与路由文件的层级完全对应即可解决问题。

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