Як працює useRouter в app router?

Next.jsMiddle~1 хв читання

useRouter в App Router (Next.js 13+) - це клієнтський хук навігації, який дозволяє керувати переходами та історією без перезавантаження сторінки.

Важливо одразу:

useRouter працює тільки в Client Components і імпортується з next/navigation.

Звідки і де використовувати

У Next.js App Router:

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

потрібен 'use client'
не можна використовувати в Server Components

Що робить `useRouter`

1. Навігація між сторінками

router.push('/blog')
router.replace('/login')

push - додає запис в history
replace - замінює поточний (без Back)

2. Повернення назад / вперед

router.back()
router.forward()

3. Оновлення поточного маршруту

router.refresh()

переопитує Server Components
заново виконує fetch на сервері
корисно після Server Action

Що `useRouter` не робить в App Router

Це часта пастка на співбесідах.

не читає params
не читає search params
не знає поточний pathname

Для цього є інші хуки:

useParams()        // route params
useSearchParams() // ?query=1
usePathname()     // /blog/post

Відмінність від Pages Router

Pages Router	App Router
`next/router`	`next/navigation`
router.query	немає
один хук	кілька спеціалізованих

У App Router - розділення відповідальності.

Типовий кейс

tsx

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

export function LogoutButton() {
  const router = useRouter()

  async function logout() {
    await signOut()
    router.replace('/login')
    router.refresh()
  }

  return <button onClick={logout}>Logout</button>
}

Коли використовувати `useRouter`

перехід за подією (submit, click)
редирект після дії
оновлення даних після мутації
керування history
не для рендеру
не для SEO
не для отримання даних

Короткий висновок для співбесіди

useRouter в App Router - це клієнтський хук навігації з next/navigation, який дозволяє програмно керувати переходами, історією та оновленням маршруту, але не призначений для читання параметрів URL.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.