Как использовать динамическую маршрутизацию NextJS с передаваемыми [папка][страница] и [категория], с getServerSideProps и / или UseRouter?

Question

У меня есть приложение 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',
    })
  )

здесь категория должна быть category.id [или cat.id] в приведенном выше JSON.

Есть мысли о том, как я могу передать этот параметр?

Спасибо