如何使用 NextJS 动态路由与要传递的 [文件夹] [页面] 和 [类别]，使用 getServerSideProps 和/或 UseRouter？

如何解决如何使用 NextJS 动态路由与要传递的 [文件夹] [页面] 和 [类别]，使用 getServerSideProps 和/或 UseRouter？

我有一个NextJS应用，一般基于静态页面，但需要添加动态路由，以避免页面的指数集。我是一名非程序员，但可以理解代码并通过一些搜索可以更新代码。

我目前正在通过 JSON 文件传递​​数据，格式如下：

 "tag":"parent","categories":[

            { 
                "id": "44456","href":"/parent/food","displayName": "Parent Food","buttonName":"food" }]

我使用下面的方法将它传递给组件：

{Data.map(({ tag,categories },i) => (
      <>
      <GridBox>
      {categories?.map((cat) => (
              <Link key={cat.id} as={cat.href} href="/[tag]/[buttonName]">
                <LinkItem onChange={onChange}>
                  {cat.buttonName}                
                </LinkItem>
              </Link>
            ))}
      </GridBox>
      </>
    ))}

我已经设置了一个 [page].jsx 来获取这个，我可以通过让页面正常工作，只要它打开 [parent]/[page]，但是对于类别，我无法将它传递给[page]，将其传递给下面的查询：

parent.getinitialProps = async ({ store,res }) => {
  await store.dispatch(
    getProducts(category,{
      order: 'asc',orderby: 'id',status: 'publish',})
  )

这里的类别是上面JSON中的categories.id [或cat.id]。

关于如何传递这个参数有什么想法吗？

谢谢