Next.js fornisce navigazione lato client più veloce di un reload completo della pagina — scarica solo i dati/componenti della nuova pagina e li scambia, mantenendo i layout condivisi montati.
;
() {
(
);
}
<Link> renderizza un <a> ma intercetta il click per la navigazione lato client. Crucialmente, fa il prefetch della rotta collegata quando il link entra nel viewport, quindi la navigazione sembra istantanea.
"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
}
}
Usa useRouter quando la navigazione deve accadere in risposta a una logica (dopo un form submit, login, ecc.), non un click su un link.
<Link> precarica le rotte prima che tu clicki.Nell'App Router, gli hook provengono da next/navigation (useRouter, usePathname, useSearchParams) — non dal vecchio next/router (che è solo Pages Router). Confonderli è un errore comune.
<Link> (con prefetching automatico) e useRouter sono il modo in cui costruisci la navigazione veloce e simile a SPA per cui Next.js è noto.
Usarli invece di un semplice <a href> (che forza un reload completo) è ciò che mantiene l'app veloce e preserva lo stato del layout.