Next.js proporciona navegación del lado del cliente que es más rápida que una recarga de página completa — solo obtiene los datos/componentes de la nueva página y los intercambia, manteniendo los diseños compartidos montados.
;
() {
(
);
}
<Link> representa un <a> pero intercepta el clic para la navegación del lado del cliente. Crucialmente, precarga la ruta vinculada cuando el enlace entra en el viewport, por lo que la navegación se siente instantánea.
"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
}
}
Use useRouter cuando la navegación deba ocurrir en respuesta a la lógica (después de enviar un formulario, iniciar sesión, etc.), no en un clic en un enlace.
<Link> precarga rutas antes de que haga clic.En App Router, los hooks provienen de next/navigation (useRouter, usePathname, useSearchParams) — no del antiguo next/router (que es solo Pages Router). Confundirlos es un error común.
<Link> (con precarga automática) y useRouter son cómo construye la navegación rápida similar a SPA por la que Next.js es conocido.
Usarlos en lugar de <a href> simple (que fuerza una recarga completa) es lo que mantiene la aplicación rápida y preserva el estado del diseño.