Next.js ponuja navigacijo na strani odjemalca, ki je hitrejša od polnega nalaganja strani — prenese samo podatke/komponente nove strani in jih zamenja, medtem ko ostajajo deljeni postavovi pritrjeni.
;
() {
(
);
}
<Link> upodobi <a>, vendar prestreže klik za navigacijo na strani odjemalca. Ključno je, da predhitro naloži povezano pot, ko se povezava pojavi v pogledu, zato se navigacija počuti takojšnja.
"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
}
}
Uporabite useRouter, ko se mora navigacija zgoditi kot odziv na logiko (po pošiljanju obrazca, prijavi itd.), ne pa na klik na povezavo.
<Link> predhitro naloži poti pred klikom.V App Routerju so kljuke iz next/navigation (useRouter, usePathname, useSearchParams) — ne iz starega next/router (ki je samo za Pages Router). Zmešati jih je pogosta napaka.
<Link> (z avtomatičnim predhitrim nalaganjem) in useRouter sta način, kako gradite hitro, SPA-podobno navigacijo, za katero je Next.js znan.
Uporaba jih namesto navadnega <a href> (ki prisili polno nalaganje) je tisto, kar ohranja aplikacijo hitro in ohrani stanje postavov.