跳转错误slug无报错？Next.js与Sanity路径问题求助

用Sanity做后端、Next.js做前端的项目里，有两个slug页面，想访问第二个[product]页面，但每次都会跳转到第一个[slug]页面。两个页面在不同文件夹里，没有任何错误提示，找不到重定向的原因。

import React from 'react';
import { client, urlFor } from '../lib/client';
import { Header, Footer } from '../components';
import Link from 'next/link';

const Shop = ({getProduct}) => {
  return (
    <div>
      <Header />
      <main className="main-shop">
            <div className="title">
                <div className="title-line-left"></div>
                <h2>for sale</h2>
                <div className="title-line-right"></div>
            </div>
            <div className="shop">
              <ul className="products">
                {getProduct && getProduct.map((getProduct, index) => (
                  <Link href={`/${getProduct.slug.current}`}>
                    <li key={index}>
                      <a href="./products/[product].js"><img src={urlFor(getProduct.productImage).auto('format').url()} alt={getProduct.productName}/></a>
                      <span className="product-name">{getProduct.productName}</span>
                      <span className="product-price">${getProduct.price}.00</span>
                    </li>
                  </Link>
                ))}
              </ul>
          </div>
      </main>
      <Footer />
    </div>
  )
}

export default Shop

export const getServerSideProps = async (pageContext) => {
  const productQuery = `*[_type == 'products']{productName, slug, price, productImage}`;
  const getProduct = await client.fetch(productQuery);

  return {
    props: {getProduct}
  }
}

问题原因 #

1. 路由跳转冲突：Next.js的Link组件内部嵌套了原生<a>标签，且这个a标签的href写死成./products/[product].js，干扰了Link的路由逻辑，导致跳转混乱。
2. 路径指向错误：Link的href用了/${getProduct.slug.current}，直接指向根目录下的slug页面，而产品详情页实际在products/[product].js，所以会匹配到根目录的[slug].js页面，导致跳转到第一个slug对应的页面。

修复步骤 #

1. 移除Link内部<a>标签的href属性，或者直接删掉这个a标签（Next.js的Link会自动处理内部元素的跳转逻辑）。
2. 修改Link的href路径，指向产品详情页的正确路由，同时把map循环里的参数名改成product避免变量重名：

修改后的核心代码片段：

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

3. 确认产品详情页文件路径为pages/products/[product].js，并且在该页面中正确通过slug参数从Sanity拉取对应产品的数据。

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