Routing és navigáció

5. Routing és navigáció

Az App Routerben a fájlrendszer határozza meg az URL-eket; a felületen a next/link és a next/navigation hookokkal lépsz tovább oldalról oldalra anélkül, hogy teljes újratöltés történne.

Link – deklaratív navigáció

import Link from 'next/link'

export function Nav() {
  return (
    <nav>
      <Link href="/">Főoldal</Link>
      <Link href="/blog">Blog</Link>
      <Link href="/blog/mi-az-a-nextjs" prefetch>
        Bejegyzés (prefetch bekapcsolva – alapértelmezés szerint a viewport közelében)
      </Link>
    </nav>
  )
}

Fontos: A Link alapból kliens oldali navigációt végez: a közös layout megmarad, a szerver csak a szükséges adatot/streamet küldi. A prefetch={false} kikapcsolja az előre letöltést (pl. nagyon sok linknél).

Dinamikus szegmensek

// posts.map(post => ...)
<Link href={`/blog/${post.slug}`}>{post.title}</Link>

Programozott navigáció (Client Component)

'use client'

import { useRouter, usePathname, useSearchParams } from 'next/navigation'

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

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Irány a dashboard
    </button>
  )
}

useRouter: push, replace, refresh (szerver cache újraértékelése), back.
usePathname: az aktuális útvonal neve (pl. /settings/profile).
useSearchParams: query string olvasása – figyelem: ez Client Componentben CSR bailout-ot okozhat; érdemes külön Suspense határba tenni (lásd a Streaming, vízesések fejezetet).

Szerver oldali átirányítás

Űrlap után vagy auth ellenőrzés után ne a böngésző location-jét használd, hanem a redirect() függvényt a szerveren (next/navigation) – részletesebben a Hibakezelés mélyebben fejezetben.

📝 Összefoglaló – 5. fejezet

Link a standard navigáció; prefetch alapból segíti a gyors átmeneteket
useRouter / usePathname / useSearchParams csak Client Componentben – hook szabályok érvényesek
Dinamikus URL-ekhez template literál vagy href objektum használható