Next.jsmedium

Jak nawigować programowo w App Router?

Tagi

#app-router#useRouter#navigation

Odpowiedź

W Client Component użyj `useRouter()` z `next/navigation` i wywołaj `router.push()` / `router.replace()`. W Server Components zwykle robisz redirect przez `redirect()`.

'use client'

import { useRouter } from 'next/navigation'

export function GoButton() {
  const router = useRouter()
  return (
    <button onClick={() => router.push('/en')}>Go</button>
  )
}

Odpowiedź zaawansowana

Głębiej

Rozwinięcie krótkiej odpowiedzi — co zwykle ma znaczenie w praktyce:

Kontekst (tagi): app-router, useRouter, navigation
Lifecycle: co dzieje się w runtime (render/build, request/response, background jobs).
Cache: gdzie jest cache, co jest kluczem, jak invalidować bez "cache chaos".
Bezpieczeństwo: authn/authz, sekrety, powierzchnia ataku (SSRF/CSRF).
Wytłumacz "dlaczego", nie tylko "co" (intuicja + konsekwencje).
Trade-offy: co zyskujesz i co tracisz (czas, pamięć, złożoność, ryzyko).
Edge-case’y: puste dane, duże dane, błędne dane, współbieżność.

Przykłady

Poniżej dodatkowy przykład (bazuje na tym, co już jest w odpowiedzi):

'use client'

import { useRouter } from 'next/navigation'

export function GoButton() {
  const router = useRouter()
  return (
    <button onClick={() => router.push('/en')}>Go</button>
  )
}