Next.js suteikia kliento pusės navigaciją, kuri greitesnė nei visas puslapio perkraustymas — ji atsiunčia tik naujo puslapio duomenis/komponentus ir juos keičia, išlaikant montavus bendrinius maketikus.
;
() {
(
);
}
<Link> nusikraipo <a>, bet perima spustelėjimą kliento pusės navigacijai. Kritiškai svarbu, jis iš anksto gauna susietą maršrutą, kai nuoroda pateks į peržiūros plotį, todėl navigacija atrodo akimirksniška.
"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
}
}
Naudokite useRouter, kai navigacija turi įvykti logikos atsakymu (pateikus formą, prisijungus ir t. t.), ne spustelėjus nuorodą.
<Link> iš anksto pakrauna maršrutus prieš spustėlėdamas.Programoje Router, traukiai gaunamos iš next/navigation (useRouter, usePathname, useSearchParams) — ne iš senosios next/router (kuri yra tik Pages Router). Jų maišymas yra dažna klaida.
<Link> (su automatiniu iš anksto gavimu) ir useRouter yra būdas sukurti greitą, panašią į SPA navigaciją, dėl kurios Next.js žinomas.
Jų naudojimas vietoj paprastos <a href> (kuri priverstinai perperkrausto) yra tai, kas išlaiko programą sparčią ir išlaiko maketiko būseną.