Next.js leverer client-side navigation, som er hurtigere end en fuld sidegenindlæsning — den henter kun den nye sides data/komponenter og bytter dem ud, og holder delte layouts monteret.
Link-komponenten (deklarativ)
;
() {
(
);
}
<Link> gengiver et <a>, men opfanger klikket for client-side navigation. Afgørende er det, at den prefetcher den linkede rute, når linket kommer ind i viewport'et, så navigation føles øjeblikkelig.
"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
}
}
Brug useRouter, når navigation skal ske som svar på logik (efter en formularindsendelse, login, osv.), ikke på et klik på et link.
<Link> forindlæser ruter, før du klikker.I App Routeren kommer hooks fra next/navigation (useRouter, usePathname, useSearchParams) — ikke den gamle next/router (som kun er Pages Router). At blande dem er en hyppig fejl.
<Link> (med automatisk prefetching) og useRouter er hvordan du bygger den hurtige, SPA-lignende navigation, som Next.js er kendt for.
At bruge dem i stedet for almindelig <a href> (som tvinger en fuld genindlæsning) er det, der holder appen hurtig og bevarer layout-tilstand.