Next.js pruža navigaciju na strani klijenta koja je brža od potpunog osvežavanja stranice — preuzima samo podatke/komponente nove stranice i zamjenjuje ih, čuvajući zajedničke izglede postavljene.
;
() {
(
);
}
<Link> prikazuje <a> ali presreće klik za navigaciju na strani klijenta. Ključno je što preunapunjaava povezanu rutu kada link uđe u prikaz, pa se navigacija čini trenutnom.
"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
}
}
Koristite useRouter kada se navigacija mora dogoditi kao odgovor na logiku (nakon slanja obrasca, prijave, itd.), a ne na klik na vezu.
<Link> preunapunjava rute prije nego što kliknete.U App Routeru, udice dolaze iz next/navigation (useRouter, usePathname, useSearchParams) — ne iz starog next/router (što je samo Pages Router). Miješanje ih je česta greška.
<Link> (s automatskim preunapunjavanje) i useRouter su kako gradite brzu, SPA-sličnu navigaciju za koju je Next.js poznat.
Korštenjem them umjesto jednostavnog <a href> (koji forsira potpuno osvežavanje) je ono što čini aplikaciju brzom i čuva stanje izgleda.