Next.js fornece navegação do lado do cliente que é mais rápida do que recarregar a página inteira — ela busca apenas os dados/componentes da nova página e os substitui, mantendo os layouts compartilhados montados.
;
() {
(
);
}
<Link> renderiza uma <a> mas intercepta o clique para navegação do lado do cliente. Crucialmente, ele prefetch (pré-carrega) a rota vinculada quando o link entra na viewport, para que a navegação pareça 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 quando a navegação deve acontecer em resposta à lógica (após enviar um formulário, login, etc.), não em um clique em um link.
<Link> pré-carrega rotas antes de você clicar.No App Router, os hooks vêm de next/navigation (useRouter, usePathname, useSearchParams) — não do antigo next/router (que é apenas Pages Router). Misturá-los é um erro comum.
<Link> (com pré-carregamento automático) e useRouter é como você constrói a navegação rápida, semelhante a SPA, pela qual Next.js é conhecido.
Usá-los em vez de simples <a href> (que força uma recarga completa) é o que mantém o aplicativo responsivo e preserva o estado do layout.