useRouter の使い方。push・replace・refresh の違い

next/navigation から読み込む

App Router では、useRouter を next/navigation から読み込みます。next/router は Pages Router のもので、App Router のページで使うと動きません（NextRouter was not mounted の直し方）。

フックなので、'use client' を書いたファイルの中で使います。

'use client'
import { useRouter } from 'next/navigation'
 
export function SaveButton() {
  const router = useRouter()
  return <button onClick={() => router.push('/done')}>保存</button>
}

push・replace・refresh・back の違い

ボタンから4つを順に呼び、ブラウザの履歴の数と、サーバーで描いた時刻を見ました。

呼んだもの	履歴	起きたこと
router.push('/a?q=1')	1つ増えた	/a?q=1 へ移った
router.replace('/a?q=2')	増えない	/a?q=2 へ移った（今の履歴が置き換わる）
router.refresh()	増えない	サーバーで描いた部分だけが新しくなった
router.back()	そのまま	1つ前の画面へ戻った

どの移動でも、ページ全体の読み直しは起きませんでした。layout に置いた Client Component の状態（数えた回数）は、移動のあとも残っていました。

• push：普通の移動。戻るボタンで戻れる
• replace：今の履歴を置き換える。検索条件を URL に入れるときのように、戻るボタンで1つずつ戻られると困る移動に使う
• refresh：URL を変えずに、サーバーで描いた部分を取り直す。実機では、サーバーで描いた時刻が新しくなり、ブラウザ側の状態（数えた回数）はそのままでした

リンクなら Link を使う

押すと移るだけなら、useRouter ではなく next/link の Link を使います。公式ドキュメントによると、Link は <a> として描かれ、画面に入ったリンク先を先に読み込んでおきます。useRouter は、保存が終わってから移る、のように処理のあとで移動したいときに使います。

Server Component やフォームの処理の中で移動したいときは、redirect を使います（redirect の使い分け）。

今の URL を読むフック

next/navigation には、今の URL を読むフックもあります。/items/42 で開いたときの値を確かめました。

フック	/items/42	/a?q=2
usePathname()	/items/42	/a
useSearchParams().get('q')	null	2
useParams()	{ id: '42' }	{}

usePathname にはクエリ文字列が入りません。クエリは useSearchParams で読みます。useSearchParams を使う部品は Suspense で囲む必要があります（useSearchParams を Suspense で囲まないと止まる）。

まとめ

1. useRouter は next/navigation から。'use client' のファイルで使う
2. 普通の移動は push、履歴を増やしたくないなら replace
3. サーバーの内容を取り直すなら refresh。ブラウザ側の状態は消えない
4. ただのリンクなら Link、サーバー側の移動なら redirect