next jsでページをロードせずにurlを更新したい場合

shallow routing使えば実現できる

const handleChangeIndex = (index: number) => {
  const routes = {
    1: 11,
    2: 22
  }
  const targetId = routes[index]
  if (!targetId) return

  router.push(`/index?target_id=${targetId}`, undefined, { shallow: true })
}

getServerSidePropsやgetStaticPropsは実行されずurlだけ切り替わったような挙動になる

※別urlへの遷移はshallowに設定していてもページ遷移の動作になるので注意
/hoge?aaa=1 => /hoge?bbb=2はOK
/hoge => /fugaはNG