TL;DR
<Link> コンポーネントを使わずに画面遷移させる Hook。Client Component でしか使えない。
仕組み
Next.js のドキュメントによると、useRouter は next/navigation から import し、次のメソッドを持つ。
push: 指定したルートにクライアント側で遷移し、ブラウザの履歴に新しいエントリを足すreplace: 履歴にエントリを足さずに遷移するrefresh: 今のルートをサーバにもう一度リクエストし、Server Components を再レンダリングする。useStateなどのクライアントの状態やスクロール位置は失われないprefetch: 指定したルートを先読みし、遷移を速くするback、forward: ブラウザの履歴を戻る、進む
例
router.push を呼ぶと、任意の画面に遷移する。
"use client"
import { useRouter } from "next/navigation"
export default function Page({ params, searchParams }: Props) {
// ...
const router = useRouter()
return (
<div>
...
<button onClick={() => router.push("/categories")}>カテゴリー一覧へ戻る</button>
</div>
)
}router.back を呼ぶと、1 つ前に表示していた画面に戻る。
<button onClick={() => router.back()}>戻る</button>注意点
Next.js のドキュメントでは、特別な理由がなければ useRouter より <Link> コンポーネントを使うよう勧めている。また、信頼できない URL を push や replace に渡してはならない。javascript: の URL を渡すとページのコンテキストで実行されるので、XSS の脆弱性になる。App Router では next/router ではなく next/navigation から import する。