useRouterの使い方：App Routerの画面遷移・履歴・refresh
useRouterでボタンから画面を切り替える方法を解説します。push・replace・back・refreshの役割と、next/routerとの違いを確認します。
useRouterでボタンから画面を切り替える方法を解説します。push・replace・back・refreshの役割と、next/routerとの違いを確認します。
対象環境と役割
App Routerで使う機能
この記事のApp Routerの例はNext.js 15以降の非同期リクエストAPIに合わせた書き方です。Next.js 16ではCache Componentsを有効にしない構成を前提とします。Pages Routerの記事とは配置先・実行場所が異なるため、プロジェクトのルーターとバージョンを先に確認してください。
TypeScriptの例は5.2以降と、利用するNext.jsが対応するNode.jsを前提にします。app/layout.tsx を備えたApp Routerプロジェクトで実行してください。
引数・戻り値・受け渡すデータ
next/navigation の useRouter() は操作用オブジェクトを返します。push は履歴を追加、replace は現在の履歴を置換、back は前の履歴へ戻ります。
コード例を動かす
app/navigation-demo/page.tsx を作成する
以下はこのファイルとして配置する例です。既存ファイルへ追記する場合は、同じ名前のexportやURLが重複しないように統合してください。
'use client';
import { useRouter } from 'next/navigation';
export default function NavigationDemo() {
const router = useRouter();
return <main><h1>画面遷移の練習</h1>
<button onClick={() => router.push('/navigation-demo?mode=detail')}>詳細へ</button>
<button onClick={() => router.replace('/navigation-demo')}>表示条件を解除</button>
<button onClick={() => router.back()}>戻る</button>
<button onClick={() => router.refresh()}>サーバー表示を更新</button>
</main>;
}実行結果と処理の順序
詳細ボタンでURLのクエリが変わります。この例ではURL操作だけを示しているため、本文の内容は同じです。URLと画面を連動させる場合は useSearchParams などで値を読みます。
通常のナビゲーションは Link を使い、処理後の移動やボタン操作のときにrouterを使うと、リンクとしての操作性を保ちやすくなります。
つまずきやすい点と使い分け
Pages Routerとは別のimport
Pages Routerの next/router にある query や pathname が同じ形で取得できるわけではありません。App Routerでは useParams、usePathname、useSearchParams を役割ごとに使います。
refreshとキャッシュ破棄は別
refresh() は現在のルートのサーバー表示を取り直しますが、サーバー側に保存されたデータキャッシュをすべて破棄する命令ではありません。未検証の外部入力を push へ渡すと危険なURLへ遷移し得るため、移動先を検証します。
静的出力で使えるか
ブラウザーでの処理は静的サイトでも利用できます。ただし遷移先のページは事前に生成されている必要があり、クライアントでの操作がサーバー機能や認可の代わりになるわけではありません。
確認課題と実務への応用
自分で値を変えて確認する
push後に戻る操作を試し、replaceしたときとの履歴の違いを説明してください。別サイトから直接開いた場合、backは自サイト内へ戻る保証がない点も確認します。
開発サーバーだけでなく、本番用ビルドと公開先でも確認します。URLを直接開く場合と画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力の問題が見つかります。
公式資料と関連する記事
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。