next routerでqueryを渡す際に、URLに表記させない

2023/02/17に公開

https://nextjs.org/docs/api-reference/next/router

import { useRouter } from 'next/router'

export default function ReadMore({ post }) {
  const router = useRouter()

  return (
    <button
      type="button"
      onClick={() => {
        router.push({
          pathname: '/hoge',
          query: { id: post.id },
        },'/hoge') // 第二引数(as)で上書きする
      }}
    >
      Click here to read more
    </button>
  )
}

上記の例で、/hogeに遷移させる際に、query id をURLに表示させたくない場合は、第二引数の as を使うことで表記を /hoge のように上書きすることができる。

見た目上上書きされているだけなので
router.query.id でidは取得可能。

ただし
/hoge?id=999
のようなURLを直接叩かれた場合は、表記は変更されず、queryも通常通り取得可能。

もしケース毎に何か対策を施したい場合は
router.asPath の値を参照して分岐に利用することで回避はできそう。

Discussion