useRouter

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

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

app/example-client-component.tsx

'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）の脆弱性にさらす可能性があります。たとえば、router.pushまたはrouter.replaceに送信されたjavascript:URLは、ページ内で実行されます。

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

フェッチリクエストがキャッシュされている場合、refresh()は同じ結果を再現する可能性があります。cookiesやheadersなどの他のDynamic 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)
    // You can now use the current 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を渡すことで、この動作を無効にできます。