This is the project structure:

1. Pages:
   • Category1:
     • [id].tsx (let us call it page 1)
     • Category2:
       • [id].tsx (page 2)

So page 1 has been created with getStaticPaths() from a different page. What i'm trying to achieve is, clicking a button in page 1 and it redirects me to page two with 'id' as the parameter. I would later on use the 'id' recieved to make an API call to the server using getStaticProps.

Below is an onClick event for the button in page 1:

const openPage2 = (event) => {
    router.push({
      pathname: `/Category2/[_id]`,
      query: { _id: data._id }
    })
  }

But it displays a 404 page error. I would appreciate some assistance from the community here/