Next.js biedt client-side navigatie die sneller is dan een volledig pagina herladen — het haalt alleen de gegevens/componenten van de nieuwe pagina op en wisselt ze in, terwijl gedeelde layouts gemount blijven.
;
() {
(
);
}
<Link> rendert een <a> maar onderschept de klik voor client-side navigatie. Cruciaal is dat het de gekoppelde route prefetch wanneer de link in de viewport komt, zodat navigatie instant aanvoelt.
"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
}
}
Gebruik useRouter wanneer navigatie moet gebeuren als reactie op logica (na een formulierinzending, login, enz.), niet op een klik op een link.
<Link> preloadt routes voordat je klikt.In de App Router komen hooks uit next/navigation (useRouter, usePathname, useSearchParams) — niet de oude next/router (die alleen Pages Router is). Deze verwarren is een veel voorkomende fout.
<Link> (met automatisch prefetching) en useRouter zijn hoe je de snelle, SPA-achtige navigatie bouwt waarvoor Next.js bekend staat.
Ze gebruiken in plaats van gewone <a href> (wat een volledig herladen forceert) is wat de app snel houdt en de layoutstatus bewaart.