Навигация: Link и useRouter

Переходим между страницами мгновенно, без полной перезагрузки браузера.

Link — компонент Next.js для переходов между маршрутами на стороне клиента: он не перезагружает страницу и заранее подгружает целевой маршрут.

Почему не обычный <a>

Обычная ссылка <a href> заставляет браузер заново скачать и отрисовать всю страницу — теряется состояние, мигает экран. Link делает клиентский переход: меняется только нужная часть, layout сохраняется, а целевой маршрут предзагружается, пока ссылка видна на экране.

import Link from "next/link";

export default function Nav() {
  return (
    <nav>
      <Link href="/">Главная</Link>
      <Link href="/about">О нас</Link>
      <Link href="/blog/nextjs">Статья</Link>
    </nav>
  );
}

Программная навигация: useRouter

Иногда нужно перейти не по клику на ссылку, а после действия — например, отправки формы. Тогда используют хук useRouter. Важно: он работает только в клиентском компоненте, поэтому в начале файла ставят 'use client':

"use client";
import { useRouter } from "next/navigation";

export default function LoginButton() {
  const router = useRouter();

  function handleClick() {
    // ...какая-то логика...
    router.push("/dashboard");
  }

  return <button onClick={handleClick}>Войти</button>;
}

Метод	Что делает
`router.push("/x")`	Перейти на /x, добавив запись в историю
`router.replace("/x")`	Перейти, заменив текущую запись истории
`router.back()`	Вернуться назад
`router.refresh()`	Перезапросить данные текущего маршрута

Важная деталь импорта

В App Router useRouter импортируют из next/navigation, а не из next/router (это устаревший путь для Pages Router). Перепутать — частая ошибка, дающая невнятную ошибку времени выполнения.

Итог

Для ссылок используйте Link — клиентский переход без перезагрузки и с предзагрузкой.
Для переходов из кода — useRouter (только в клиентском компоненте с 'use client').
В App Router импорт — из next/navigation.