Next.js fournit une navigation côté client plus rapide qu'un rechargement complet de la page — elle récupère uniquement les données/composants de la nouvelle page et les insère, en gardant les mises en page partagées montées.
;
() {
(
);
}
<Link> affiche un <a> mais intercepte le clic pour la navigation côté client. Crucialement, il précharge la route liée quand le lien entre dans la zone visible, donc la navigation semble instantanée.
"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
}
}
Utilisez useRouter quand la navigation doit se produire en réponse à une logique (après une soumission de formulaire, une connexion, etc.), pas un clic sur un lien.
<Link> précharge les routes avant que vous ne cliquiez.Dans l'App Router, les hooks proviennent de next/navigation (useRouter, usePathname, useSearchParams) — pas l'ancien next/router (qui est Pages Router uniquement). Les mélanger est une erreur courante.
<Link> (avec préchargement automatique) et useRouter sont comment vous construisez la navigation rapide et ressemblant à une SPA pour laquelle Next.js est connu.
Les utiliser au lieu de simples <a href> (qui forcent un rechargement complet) est ce qui garde l'application fluide et préserve l'état de la mise en page.