Next.js предоставляет навигацию на стороне клиента, которая быстрее, чем полная перезагрузка страницы — она получает только данные/компоненты новой страницы и заменяет их, сохраняя общие макеты смонтированными.
;
() {
(
);
}
<Link> отрисовывает <a>, но перехватывает клик для навигации на стороне клиента. Важно, что он предварительно загружает связанный маршрут, когда ссылка входит в окно просмотра, поэтому навигация кажется мгновенной.
"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
}
}
Используйте useRouter, когда навигация должна происходить в ответ на логику (после отправки формы, входа и т. д.), а не на клик по ссылке.
<Link> предварительно загружает маршруты перед кликом.В App Router хуки поступают из next/navigation (useRouter, usePathname, useSearchParams) — не из старого next/router (который только Pages Router). Их смешивание — частая ошибка.
<Link> (с автоматической предварительной загрузкой) и useRouter — это способ создания быстрой, похожей на SPA навигации, за которую известен Next.js.
Использование их вместо простого <a href> (который заставляет полностью перезагружаться) — это то, что поддерживает приложение отзывчивым и сохраняет состояние макета.