useRouter

useRouter を分かりやすく

useRouterとは、Next.jsで提供されているフックの一つで、現在のルート（ページ）に関する情報を取得したり、新しいルートにナビゲートしたりするための機能を提供しています。ちょっと難しく聞こえるかもしれませんね。

では、これを例え話で説明してみましょう。例えば、あなたが車を運転しているとしましょう。その車はあなたがどこへ行くべきかを自動的に知ることはできません。あなた自身がどこに行きたいのか、どの道路を使ってそこに行くのかを決定し、それに従って運転しますよね。

ここでuseRouterが出てきます。useRouterは、あなたが車の運転席に座っているときのナビゲーションシステムのようなものです。あなたがどこに行きたいのか、どの道を通ってそこに到達するのかを教えてくれます。さらに、道中で何かが起こった場合（例えば、道路が閉鎖されていたり、交通事故が発生していたりする場合）に、新しいルートを提案してくれます。

つまり、useRouterはWebページ間のナビゲーションを助けてくれるツールなんです。現在表示しているページの情報を取得したり（URL、パス名、クエリパラメータなど）、新しいページへ遷移したりします。これは例えば、特定のボタンをクリックしたときに別のページに移動させるといったことを可能にします。

「そもそもこれ使う意味あるん？」って方いるかと思いますが、あります。これはウェブアプリケーションにおいて、ページ間のナビゲーションをスムーズにするために重要な機能です。それにより、ユーザーが求める情報に素早くアクセスできるようにするため、ユーザーエクスペリエンスを向上させることができます。だいぶヤバいやつですよね〜。

ここまで大丈夫ですか？では、次にuseRouterの具体的な使い方について見てみましょう。このためには、最新の情報を確認するためにインターネットを見てみましょう。

useRouterフックは、Client Components内でプログラム的にルートを変更するためのツールです。useRouterを使うと、例えばボタンのクリックイベントに対応して新しいページに移動するといったことが可能になります。

特定のメソッドが提供されています。以下にそれぞれのメソッドの機能を表にまとめてみました。

これを例え話にすると、useRouterはあなたが運転している車のナビゲーションシステムのようなものです。目的地（pushやreplaceメソッド）、途中での休憩（refreshメソッド）、途中で見つけた興味深い場所への迂回（prefetchメソッド）、後戻り（backメソッド）、または前進（forwardメソッド）など、あなたがどこへ行きたいかに応じて適切な指示を出します。

「そもそもこれいつ使うん？」って方いるかと思いますが、実は、ページ内で特定の動作（ボタンクリックやフォームの送信など）をトリガーにして新しいページに移動するときや、ユーザーがサイト内を自由に移動できるようにするときなどに使います。めっちゃ便利なんですよ！

ただし、useRouterフックは最近のバージョンのNext.jsではnext/navigationからインポートするようになりました。そして、pathnameと`

Next.jsの新しいuseRouterとusePathnameについて説明しますね。この二つは、ページのルーティングと現在のURLのパス名を操作するための便利なフックですよ。

まずuseRouterですが、これはClient Component内でプログラム的にルーティングを変更するためのフックです。例えば、あなたが「ダッシュボード」ボタンを作って、それをクリックしたときにダッシュボードページに遷移させたいとしましょう。その時にuseRouterを使って、ボタンのonClickハンドラーにrouter.push('/dashboard')を設定することで、その遷移を実現できます。

他にもrouter.replaceでブラウザの履歴に新しいエントリーを追加せずにルートを変更したり、router.refreshで現在のルートをリフレッシュしたり、router.prefetchで遷移を高速化するためにルートを先取りしたり、router.backやrouter.forwardでブラウザの履歴内を移動したりできます。めっちゃ便利なんですよ！

ただし、新しいuseRouterはnext/navigationからインポートするようになっています。それと、pathnameやqueryのようなプロパティはなくなり、代わりにusePathnameやuseSearchParamsが使われます。

次にusePathnameについて説明しますね。これは現在のURLのパス名を読むためのClient Componentフックです。つまりどういうことなん？って思いますよね？例えば、URLが/dashboardであれば、usePathnameは'/dashboard'を返します。これを使うと、特定のパスが表示されているときに何かを実行するなど、ルートの変更に応じて何かをすることができます。

また、ルーターのイベントについては、usePathnameとuseSearchParamsを使ってページの変更をリッスンすることができます。これらを組み合わせると、カスタムフックを作成してレイアウトに追加できます。このフックは、パス名や検索パラメータが変更されたときに更新されます。

例え話で解説すると、まるで自動運転車のようなものですね。useRouterはあなたの代わりに運転をして、目的地（

ルート）へと自動的に運んでくれます。一方、usePathnameは現在の位置（パス名）を知らせてくれるGPSのようなものです。そして、ルーターのイベントは道路の状態（パス名や検索パラメータの変更）を監視する道路情報サービスのようなものと言えます。これらを組み合わせれば、効率的なウェブサイトナビゲーションが可能になりますよ。

ただ、これらのフックはNext.jsの新しいバージョンで導入されたものなので、古いバージョンを使用している場合は適用できない点に注意が必要です。使用しているNext.jsのバージョンを確認してから使ってみてくださいね。

結論

「useRouter」とは、Next.js の機能の 1 つであり、Web ページのルーティングを簡単に扱えるようにするために使われます。ルーティングに関連する情報へのアクセスや、ページの移動などのルーティング制御を行うことができます。あるページである要素を非表示にするときにも使います。

useRouter は、ユーザーがどこにいるのか、現在のページにどのように移動したか、どこに移動できるかを判断できます。I use Router. と読むと理解しやすいですね。詳しくは後述しますが、簡単にまとめると次のような働きがあります。

• 現在の URL のパス、クエリ、パラメータなどにアクセスする
• プログラムからページ遷移を行う
• ルーティングのライフサイクルに関連するイベント処理を行う

例えば、あなたが、Web ページのリンクをクリックしたときに、ページ遷移する処理を実装したい場合があります。このような場合に、useRouter を使うことができます。

使用するには、まず next/router パッケージをインストールする必要があります。

import { useRouter } from 'next/router'

次に、関数コンポーネントでフックをインポートできます。

const MyComponent = () => {
  const router = useRouter()

  // 現在のルートに関する情報を取得できます。
  const pathname = router.pathname
  const query = router.query
  const asPath = router.asPath

  // 必要な処理を実行できます。
  if (pathname === '/home') {
    // ユーザーはホームページにいます。
  } else if (pathname === '/about') {
    // ユーザーはアバウトページにいます。
  }

  return (
    <div>
      <h1>My Component</h1>
      <p>現在のパスは {pathname}</p>
      <p>現在のクエリ文字列は {query}</p>
      <p>現在の asPath は {asPath}</p>
    </div>
  )
}

router object

Functions: useRouter | Next.jsのルーター オブジェクトの各特徴を日本語に意訳した上で補足情報を追加し表にまとめました。

ユースケース

他に、どのようなときに使うのでしょうか？具体的には、以下のようなケースで useRouter を利用することがあります：

ページのパス情報にアクセスしたい場合

useRouter を使用すると、現在の URL のパス、クエリ、パラメータなどにアクセスすることができます。これは例えば、動的ルーティングを行う際に特定のパスパラメータを取得するために利用されます。

プログラム的にページを移動したい場合

useRouter から返される router オブジェクトは、push や replace といったメソッドを提供します。これを利用すると、ユーザーアクションや特定の条件に基づいてプログラムからページ遷移を行うことができます。

ルーティングのイベントをハンドリングしたい場合

router オブジェクトは、ルーティングのライフサイクルに関連するいくつかのイベントを提供します。例えば、ページ遷移が開始されたとき、完了したとき、エラーが発生したときなどに特定の処理を行いたい場合にこれらのイベントを利用します。

以上のようなケースで useRouter は非常に便利です。ただし、これらの機能は全て Next.js が提供するものであり、他のフレームワークや通常の React アプリケーションでは使用できないことに注意してください。

ページ遷移をする

あなたが、Web ページを作ってるとします。まず、ルーティングを扱うためのフックである useRouter をインポートして、ページ遷移をする関数を定義します。

import { useRouter } from 'next/router'

export default function Home() {
  const router = useRouter()

  const handleClick = () => {
    router.push('/about') // ここで、ページ遷移をする関数を定義するで。
  }

  return (
    <div>
      <h1>こんにちは</h1>
      <button onClick={handleClick}>Aboutページへ</button>
    </div>
  )
}

このコードでは、useRouterフックを使って、ルーティングを扱うためのrouterオブジェクトを取得しています。そして、handleClick関数を使って、router.pushを呼び出し、ページ遷移を行っています。

router.push を分かりやすく

router.pushは、Next.js のルーターによって提供される関数で、引数に遷移先の URL を渡すことで、ページ遷移を行うことができます。

以上のように、useRouter を使うことで、簡単に Web ページのルーティングを扱うことができます。もし、あなたがリンクをクリックしたときにページ遷移をしたいと思ったら、useRouter を使ってみましょう。