Update query parameter handle logic

[aminick]

Through out the application, there are many situations where the UI will respond to the query parameter both on initial load, and sub-sequence re-renders, however, the current query parameter handle logic has a few flaws that can be error prone and hard to debug.

1. Extra '/' in the URL

This will cause Next.js's router system unable to correctly get query parameters, which makes the built in & recommend method router.query obsolete

2. Using default Popstate is error prone

Using the default Popstate leaves inconsistancy behaviors across browsers and will trigger unexpected re-render.

I will be slowly migrate to a more robust system, utilize Next.js API and React hooks.

[aminick]

Some of the current query parameter parse logic is incompatible with SSR/SGR. A lot of times, we only have the parse logic in hooks, but not in getStaticProps and other server side functions. This results in inconsistent results between the URL & the SSR content, which in rare cases, will cause unexpected rendering issues.

• [ ] Find best practices to handle query parameters for SSR & client side