Next.js tilbyr klient-side navigasjon som er raskere enn en fullstendig sideomlasting — den henter kun den nye sidens data/komponenter og bytter dem inn, mens delte oppsettet forblir montert.
;
() {
(
);
}
<Link> gir fra seg en <a> men avskjærer klikken for klient-side navigasjon. Avgjørende er at den forhenter den koblede ruten når lenken kommer inn i visningsområdet, så navigasjonen føles øyeblikkelig.
"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
}
}
Brukt useRouter når navigasjon må skje som svar på logikk (etter et skjemainnsending, pålogging, osv.), ikke et klikk på en lenke.
<Link> forinnlaster ruter før du klikker.I App Router kommer hooks fra next/navigation (useRouter, usePathname, useSearchParams) — ikke den gamle next/router (som bare er Pages Router). Å blande dem er en vanlig feil.
<Link> (med automatisk forhenting) og useRouter er hvordan du bygger rask, SPA-lignende navigasjon som Next.js er kjent for.
Å bruke dem i stedet for vanlig <a href> (som tvinger fullstendig omlasting) er det som holder appen rask og bevarer oppsettstilstand.