Next.js oferă navigație pe partea clientului care este mai rapidă decât reîncărcarea completă a paginii — aceasta prelucrează doar datele/componentele noii pagini și le schimbă, păstrând dispunerea comună montată.
;
() {
(
);
}
<Link> redă o etichetă <a> dar interceptează clicul pentru navigație pe partea clientului. Crucialmente, prefetch ruta legată atunci când legătura intră în viewport, deci navigarea pare instantanee.
"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
}
}
Folosit useRouter când navigația trebuie să se întâmple în răspuns la logică (după trimiterea unui formular, autentificare, etc.), nu pe un clic pe o legătură.
<Link> preîncarcă rutele înainte să faci clic.În App Router, hook-urile provin din next/navigation (useRouter, usePathname, useSearchParams) — nu din vechi next/router (care este doar Pages Router). A le amesteca este o eroare comună.
<Link> (cu prefetch-ing automat) și useRouter sunt cum construiești navigația rapidă, asemănătoare SPA, pentru care Next.js este cunoscut.
A le folosi în loc de simplu <a href> (care forțează o reîncărcare completă) este ceea ce păstrează aplicația responsivă și păstrează starea dispunerii.