jsschools

useRouter()

Client hook for programmatic navigation in the App Router.

Since Next 13 (App Router) Spec ↗

Syntax

import { useRouter } from 'next/navigation'; const router = useRouter()

Returns

AppRouterInstance — Router with push, replace, refresh, back, forward, prefetch.

Examples

'use client'
import { useRouter } from 'next/navigation'

export function LogoutButton() {
  const router = useRouter()
  async function logout() {
    await fetch('/api/logout', { method: 'POST' })
    router.push('/login')
    router.refresh()
  }
  return <button onClick={logout}>Log out</button>
}

'use client'
import { useRouter } from 'next/navigation'

export function BackButton() {
  const router = useRouter()
  return <button onClick={() => router.back()}>Back</button>
}

Notes

Import from `next/navigation` (NOT `next/router`, which is the Pages Router). Client Components only. `router.refresh()` re-fetches the current route's Server Components without losing client state — handy after a mutation. For declarative navigation prefer `<Link>`.

See also