Next.js tillhandahåller navigering på klientsidan som är snabbare än en fullständig sidomladdning — den hämtar endast den nya sidans data/komponenter och byter ut dem, vilket håller delade layouter monterade.
;
() {
(
);
}
<Link> renderar en <a> men fångar klicket för navigering på klientsidan. Avgörande är att den förhämtar den länkade vägen när länken kommer in i viewporten, så navigeringen känns omedelbar.
"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
}
}
Använd useRouter när navigering måste ske som svar på logik (efter ett formulärinlämning, inloggning, etc.), inte på ett klick på en länk.
<Link> förladdar vägar innan du klickar.I App Router kommer hooks från next/navigation (useRouter, usePathname, useSearchParams) — inte från den gamla next/router (som endast är för Pages Router). Att blanda dem är ett vanligt misstag.
<Link> (med automatisk förhämtning) och useRouter är hur du bygger den snabba, SPA-liknande navigering som Next.js är känt för.
Att använda dem istället för vanlig <a href> (som tvingar en fullständig omökning) är det som håller appen snabb och bevarar layouttillståndet.