︙

useRouter

useRouter hook は、プログラムによる routes の変更をClient Components内で許可します。

**推奨：**特別な要件がuseRouterを使用する場合を除き、ナビゲーションには<Link> component を使用してください。

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

app/example-client-component.js

'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 }): 提供された route へのクライアントサイドナビゲーションを実行します。新たなエントリーをブラウザの履歴の stack に追加します。
router.replace(href: string, { scroll: boolean }): これは、新たなエントリをブラウザの履歴 stack に追加することなく、指定された route への client 側のナビゲーションを行います。
router.refresh(): 現在の route を Refresh します。新しい request を server に送り、データのリクエストを再取得し、 Server Components を再レンダリングします。 client は、影響を受けないクライアン側の React (例：useState)やブラウザの状態(例： scroll 位置)を失うことなく、更新された React Server Component “”のペイロードをマージします。
router.prefetch(href: string): 提供された route をPrefetch し、クライアント側の遷移を高速化します。
router.back()：ブラウザの履歴 stack で前の route に戻ります。
router.forward(): ブラウザの履歴 stack 内の next のページに進む。

Good to know:

<Link> component は、それが viewport で可視化されると自動的に prefetch routes を行います。

refresh()は、fetch の Request がキャッシュされている場合、同じ結果を再生産することができます。cookiesやheadersのような他の dynamic 関数も response を変更することができます。

`next/router`からの移行

useRouter hook は、App Router を使用するときに next/routerではなくnext/navigationからインポートされるべきです。
pathname string は削除され、usePathname()に置き換えられました
queryという object は削除され、代わりにuseSearchParams()が使用されました。
router.eventsは置き換えられました。下を参照してください。

完全なマイグレーションガイドを見る.

Examples

Router イベント

あなたは usePathname や useSearchParams などの他の Client Component hook を組み合わせて、ページ変更を聞くことができます。

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

どれが layout にインポートできますか。

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

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

scroll 復元の無効化

default では、Next.js は新しい route に移動するときにページのトップまで scroll します。この動作は、scroll: falseをrouter.push()またはrouter.replace()に渡すことで無効化できます。

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', { scroll: false })}
    >
      Dashboard
    </button>
  )
}

app/example-client-component.jsx

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

Version History

Version	Changes
`v13.0.0`	`next/navigation`から導入された`useRouter`