useRouter

useRouter フックにより、クライアントコンポーネント内でプログラム的にルートを変更できます。

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

app/example-client-component.tsx

TypeScript

'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(): 現在のルートを更新します。サーバーへ新しいリクエストを行い、データリクエストを再取得し、サーバーコンポーネントを再レンダリングします。クライアントは、影響を受けないクライアントサイドのReact（例：useState）やブラウザの状態（例：スクロール位置）を失うことなく、更新されたReactサーバーコンポーネントのペイロードをマージします。
router.prefetch(href: string): より高速なクライアントサイドの遷移のために、指定されたルートをプリフェッチします。
router.back(): ブラウザの履歴スタック内の前のルートに戻ります。
router.forward(): ブラウザの履歴スタックの次のページに進みます。

補足：

信頼できない、またはサニタイズされていない URL を router.push や router.replace に渡さないでください。これにより、クロスサイトスクリプティング（XSS）の脆弱性にさらされる可能性があります。例えば、javascript: を含む URL を router.push や router.replace に渡すと、そのコードがページのコンテキストで実行されてしまいます。

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

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

`next/router` からの移行

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

完全な移行ガイドを表示。

例

ルーターイベント

usePathname や useSearchParams などの他のクライアントコンポーネントフックを構成することで、ページ変更を監視できます。

app/components/navigation-events.js

'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)
    // 現在のURLを使用できます
    // ...
  }, [pathname, searchParams])
 
  return '...'
}

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

app/layout.js

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>
  )
}

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

スクロールトップの無効化

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