Next.js catch-all路由[[...slug]]如何同时适配分类页与产品页路由

核心实现逻辑是优先匹配分类路径，再匹配产品，不需要依赖slug数组长度判断类型：

1. 分类用完整slug拼接的路径查询，天然适配任意层级的父/子分类结构
2. 分类查询无结果时，再取slug数组最后一位查询产品
3. 两类查询都无结果时返回404

调整后代码示例 #

页面组件修改 #

// 引入你已有的产品组件和新增的分类组件
import Product from './components/Product'
import Category from './components/Category'

export default function Catalog(props) {
  // 根据返回的类型渲染对应组件
  if (props.type === 'category') {
    return <Category category={props.category} />
  }
  if (props.type === 'product') {
    return <Product product={props.product} />
  }
  return null
}

getStaticProps 逻辑修改 #

export async function getStaticProps({ params }) {
  const slugArr = params.slug || []
  // 第一步：校验当前完整路径是否为分类
  const fullCategorySlug = slugArr.join('/')
  // getCategoryByFullSlug为你需要新增的分类查询方法，入参是拼接后的完整分类路径
  const categoryData = await getCategoryByFullSlug(fullCategorySlug)
  if (categoryData?.category) {
    return {
      props: {
        type: 'category',
        category: categoryData.category
      },
      revalidate: 30
    }
  }
  // 第二步：分类不存在时校验是否为产品
  const productSlug = slugArr.at(-1)
  if (productSlug) {
    const productData = await getSingleProduct(productSlug)
    if (productData?.product) {
      return {
        props: {
          type: 'product',
          product: productData.product
        },
        revalidate: 30
      }
    }
  }
  // 两类资源都不存在返回404
  return {
    notFound: true,
    revalidate: 30
  }
}

注意事项 #

• 你需要在WordPress侧适配新增的分类查询接口，支持按完整路径（如category/sub-category）查询对应分类，WordPress默认的分类查询仅支持单级slug匹配，可通过自定义REST接口实现全路径匹配
• 默认分类优先级高于产品，若出现完整分类路径和产品slug重名的情况，会优先展示分类页，若需要调整优先级可将产品查询逻辑放在前面
• 可选catch-all路由原生支持/catalog根路径访问，你可以在slug为空的分支中添加根分类的查询逻辑即可支持首页分类展示

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