Next.js对接Sanity点击产品详情页报404无法拉取数据求助

你贴出的首页index.js代码逻辑没有问题，既然首页已经能正常拉取Sanity的产品、banner数据，说明Sanity客户端连接、基础schema配置、slug字段定义都是正常的，404问题和当前文件无关，按以下优先级排查：

• 检查动态路由文件的路径和命名
  如果你用的是Next.js Pages Router，产品详情页必须放在pages/product/[slug].js位置：
  • 父文件夹名必须和你跳转的路径前缀完全匹配，比如跳转路径写的是/product/xxx，文件夹就必须叫product，不能是products之类的拼写，大小写也要完全一致，Linux环境下大小写不匹配直接404
  • 详情页文件名必须是[slug].js，方括号不能漏，参数名slug要和后续跳转、查询用的参数名保持统一
    如果你用的是Next.js 13+ App Router，详情页路径必须是app/product/[slug]/page.js。
• 检查Product组件的跳转链接拼接
  打开../components/Product对应的文件，检查跳转时的slug取值：Sanity返回的slug是对象类型，必须取product.slug.current作为路径后缀，漏写.current会导致跳转路径变成/product/[object Object]，直接触发404。正确的跳转写法参考：

  import Link from 'next/link';
  
  const Product = ({ product }) => {
    return (
      <Link href={`/product/${product.slug.current}`}>
        {/* 产品卡片内容 */}
      </Link>
    )
  }
  

• 检查详情页的数据获取逻辑
  打开详情页文件，核对两处核心逻辑：
  1. 路由参数取值正确：不管是用getServerSideProps还是getStaticProps，都要从context.params.slug获取当前路由的slug值，不要写错参数名，也不要错误从其他位置取值
  2. 单条产品的GROQ查询语句写法正确，参考：

  const query = `*[_type == "product" && slug.current == $slug][0]`;
  const product = await client.fetch(query, { slug });
  

  注意查询语句末尾必须加[0]取匹配结果的第一条，否则返回的是数组格式，会导致渲染异常或者404。
• 快速定位根因的方法：本地开发时，直接从Sanity后台复制一个真实存在的产品slug，手动在浏览器地址栏输入http://localhost:3000/product/你复制的slug访问：
  • 手动输入也报404：100%是路由文件的存放位置、命名错误
  • 手动输入能正常打开详情页：问题出在Product组件的跳转链接拼接错误

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