NextJS router params for the server and client.

useRouterParams.ts

import { useRouter } from 'next/router'
import * as queryString from 'query-string'

/** Converts NextJS router params into an object that is run on both the server and client. */
export function useRouterParams<Params>() {
  const router = useRouter()
  const query = queryString.parse(router.asPath.split('?')[1])

  return Object.fromEntries(
    Object.entries(query).map(([key, value]) => [key, parseValue(value)])
  ) as unknown as Partial<Params>
}

function parseValue(value) {
  if (value === 'true') {
    return true
  } else if (value === 'false') {
    return false
  } else if (isNaN(value)) {
    return value
  } else {
    return Number(value)
  }
}