use-next-router.js

/* Syntax */
import useRouter, { routes } from 'use-next-router'

// see this to implement: https://stackoverflow.com/questions/67764930/proxy-route-strings
// routes.api.posts => '/api/posts'
// routes.api.posts({ postId: 'ID' }) => '/api/posts/ID'
// routes.api.posts({ postId: 'ID' }).query({ name: 'alex' }) => '/api/posts/ID?name=alex'
// routes.api.posts.query({ name: 'alex' }) => '/api/posts?name=alex'
// routes.api.profiles({ profileId: 'ID' }).posts({ postId: 'ID' }).query({ name: 'alex' }) => '/api/profiles/ID/posts/ID?name=alex'

const Test = () => {
  useEffect(() => {
    const res = await fetch(routes.api.posts({ postId: 'some post id' }))
  }, [])
  const { push } = useRouter()
  // back defaults to { shallow: true } 
  // and if 1st arg is a route default to that when clicking back 
  // if nothing in session storage, otherwise use browser's back
  
  // push deaults to { shallow: true }
  return <>
    <div onClick={() => push(routes.tests)} />
    <div onClick={() => back(routes.fallback)} />
  </>
}

See how this can be done using JS Proxy here in this stackoverflow question I asked.