Next.js zapewnia nawigację po stronie klienta, która jest szybsza niż pełne przeładowanie strony — pobiera tylko dane/komponenty nowej strony i zamienia je, utrzymując wdrożone wspólne układy.
;
() {
(
);
}
<Link> renderuje <a> ale przechwytuje kliknięcie w celu nawigacji po stronie klienta. Co ważne, prefetchuje połączoną trasę, gdy łącze wejdzie do widoku, dzięki czemu nawigacja feels błyskawiczna.
"use client"; // useRouter needs a Client Component
import { useRouter } from "next/navigation"; // note: next/navigation in App Router
export default function LoginForm() {
const router = useRouter();
async function onSubmit() {
await login();
router.push("/dashboard"); // navigate after an action
// router.replace("/x") — no history entry
// router.back() — go back
// router.refresh() — re-fetch server data for the current route
}
}
Użyj useRouter gdy nawigacja musi nastąpić w odpowiedzi na logikę (po wysłaniu formularza, logowaniu itp.), a nie na kliknięcie łącza.
<Link> wstępnie ładuje trasy przed kliknięciem.W App Router hooki pochodzą z next/navigation (useRouter, usePathname, useSearchParams) — nie ze starego next/router (który jest tylko Pages Router). Ich mieszanie to częsty błąd.
<Link> (z automatycznym prefetchingiem) i useRouter to sposób, w jaki budujesz szybką nawigację podobną do SPA, dla której Next.js jest znany.
Zastosowanie ich zamiast zwykłego <a href> (które zmusza do pełnego przeładowania) to to, co utrzymuje aplikację szybką i zachowuje stan układu.