useRouter

useRouter フックは、Client Components内でプログラムでルートを変更できるようにします。

推奨:useRouter を使用する特別な要件がない限り、ナビゲーションには <Link> コンポーネントを使用してください。

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

`useRouter()`

router.push(href: string, { scroll: boolean }): 指定されたルートへのクライアントサイドナビゲーションを実行します。ブラウザの履歴スタックに新しいエントリを追加します。
router.replace(href: string, { scroll: boolean }): ブラウザの履歴スタックに新しいエントリを追加せずに、指定されたルートへのクライアントサイドナビゲーションを実行します。
router.refresh(): 現在のルートをリフレッシュします。サーバーへの新しいリクエストを行い、データリクエストを再取得し、Server Componentsを再レンダリングします。クライアントは、影響を受けないクライアントサイドのReact（例: useState）やブラウザの状態（例: スクロール位置）を失うことなく、更新されたReact Server Componentペイロードをマージします。
router.prefetch(href: string, options?: { onInvalidate?: () => void }): 指定されたルートをプリフェッチして、クライアントサイドの遷移を高速化します。オプションの onInvalidate コールバックは、プリフェッチされたデータが古くなった場合に呼び出されます。
router.back(): ブラウザの履歴スタックで前のルートに移動します。
router.forward(): ブラウザの履歴スタックで次のページに前方移動します。

知っておくと良いこと:

router.push または router.replace に信頼できない、またはサニタイズされていないURLを送信してはいけません。これは、サイトをクロスサイトスクリプティング（XSS）の脆弱性に対して開く可能性があります。例えば、router.push または router.replace に送信された javascript: URLは、ページのコンテキストで実行されます。

<Link> コンポーネントは、ビューポートに表示されると自動的にルートをプリフェッチします。

fetchリクエストがキャッシュされている場合、refresh() は同じ結果を再現する可能性があります。cookies や headers のような他の動的APIもレスポンスを変更する可能性があります。

onInvalidate コールバックは、プリフェッチリクエストごとに最大1回呼び出されます。これは、更新されたルートデータに対して新しいプリフェッチをトリガーしたいタイミングを示します。

next/routerからの移行

App Routerを使用する場合、useRouter は next/router ではなく next/navigation からインポートする必要があります。
pathname 文字列は削除され、usePathname() に置き換えられました。
query オブジェクトは削除され、useSearchParams() に置き換えられました。
router.events は置き換えられました。下記を参照。

完全な移行ガイドを見る.

例

ルーターイベント

usePathname や useSearchParams のような他のClient Componentフックを組み合わせることで、ページ変更をリッスンできます。

'use client'
 
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
 
export function NavigationEvents() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
 
  useEffect(() => {
    const url = `${pathname}?${searchParams}`
    console.log(url)
    // You can now use the current URL
    // ...
  }, [pathname, searchParams])
 
  return '...'
}

レイアウトにインポートできます。

import { Suspense } from 'react'
import { NavigationEvents } from './components/navigation-events'
 
export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
 
        <Suspense fallback={null}>
          <NavigationEvents />
        </Suspense>
      </body>
    </html>
  )
}

補足: <NavigationEvents> は、useSearchParams() が静的レンダリング中に最も近いSuspense境界までのクライアントサイドレンダリングを引き起こすため、Suspense境界でラップされています。詳細はこちら。

トップへのスクロールを無効にする

デフォルトでは、Next.js は新しいルートにナビゲートする際にページのトップにスクロールします。この動作は、router.push() または router.replace() に scroll: false を渡すことで無効にできます。

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button
      type="button"
      onClick={() => router.push('/dashboard', { scroll: false })}
    >
      Dashboard
    </button>
  )
}

バージョン履歴

バージョン	変更履歴
`v15.4.0`	`router.prefetch` のオプションの `onInvalidate` コールバックが導入されました
`v13.0.0`	`next/navigation` からの `useRouter` が導入されました。