Навигация и ссылки в Next.js App Router

Зачем это нужно: проблематика и архитектурный контекст#

В традиционных многостраничных приложениях (MPA) клик по стандартной ссылке <a href="..."> инициирует полный сетевой цикл: браузер запрашивает новый HTML-документ, уничтожает текущий DOM, заново скачивает и исполняет скрипты и стили. Это приводит к потере контекста пользователя (запущенные медиаплееры, состояние несохраненных форм, открытые диалоги) и ухудшению показателей Core Web Vitals (в частности, Interaction to Next Paint, INP).

Next.js App Router реализует гибридную архитектуру маршрутизации. Переходы выполняются как мягкая навигация (Soft Navigation): браузер не перезагружает страницу, а клиентский роутер запрашивает только изменившееся дерево React Server Components (RSC Flight Stream), сохраняя родительские макеты и состояние интерфейса.

В сочетании с интеллектуальным Prefetching (предзагрузкой) и оптимизированным кэшем памяти это позволяет достичь практически мгновенного (0ms perceived latency) переключения между экранами.

Ментальная модель: Subtree Reconciliation и Router Cache#

Архитектура навигации в Next.js 16 и React 19 базируется на четырех фундаментальных механизмах:

1. Subtree Reconciliation (Частичная сверка): При навигации между /dashboard/analytics и /dashboard/settings корневой макет и каркас дашборда не перерендериваются. Обновляется только листовой слот children.
2. Client Router Cache: Оперативный кэш в памяти браузера, сохраняющий предзагруженные сегменты страниц.
3. Adaptive Prefetching (Адаптивный префетч): Автоматическая фоновая предзагрузка сегментов при попадании ссылки в область видимости (viewport) через Intersection Observer API.
4. Transition-навигация (useTransition): Неблокирующее выполнение программных переходов в React 19, сохраняющее отзывчивость интерфейса при медленных сетевых ответах.

Алгоритм исполнения и жизненный цикл (Runtime Execution)#

Синтаксис и API: декларативные и программные переходы#

1. Декларативная навигация через <Link>#

Компонент <Link> из next/link расширяет нативный HTML-тег <a> автоматической предзагрузкой и плавной навигацией:

import Link from 'next/link';

export function NavBar() {
  return (
    <nav className="flex gap-4 p-4 border-b border-border text-sm">
      {/* prefetch={null} (по умолчанию): адаптивный префетч статики и скелетонов */}
      <Link href="/dashboard" className="hover:text-accent-violet transition-colors">
        Дашборд
      </Link>

      {/* prefetch={true}: принудительная полная предзагрузка всего дерева */}
      <Link href="/analytics" prefetch={true} className="hover:text-accent-violet transition-colors">
        Аналитика
      </Link>

      {/* scroll={false}: переход без прыжка скролла наверх (для табов и пагинации) */}
      <Link href="/settings?tab=security" scroll={false} className="hover:text-accent-violet transition-colors">
        Настройки безопасности
      </Link>
    </nav>
  );
}

2. Программная навигация через useRouter() и useTransition в React 19#

В клиентских компонентах программный переход выполняется через хук useRouter(). В React 19 рекомендуется связывать навигацию с хуком useTransition для отображения плавного состояния ожидания (isPending):

'use client';

import { useRouter } from 'next/navigation';
import { useTransition } from 'react';

export function CategoryFilter() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const handleSelect = (category: string) => {
    // Неблокирующий переход: интерфейс не зависает во время загрузки RSC
    startTransition(() => {
      router.push(`/catalog?category=${category}`, { scroll: false });
    });
  };

  return (
    <div className="flex items-center gap-2">
      <button
        onClick={() => handleSelect('laptops')}
        disabled={isPending}
        className="px-3 py-1.5 rounded bg-bg-elevated border border-border text-xs disabled:opacity-50"
      >
        {isPending ? 'Загрузка...' : 'Ноутбуки'}
      </button>
    </div>
  );
}

3. Серверные перенаправления: redirect() и permanentRedirect()#

В серверных компонентах, Route Handlers и Server Actions навигация выполняется специальными серверными функциями, выбрасывающими управляемое прерывание:

import { redirect } from 'next/navigation';

async function getSession() {
  return null; // Пользователь не авторизован
}

export default async function DashboardPage() {
  const session = await getSession();

  if (!session) {
    // Вызывает NEXT_REDIRECT и отдает HTTP 307
    redirect('/login?from=/dashboard');
  }

  return <div>Секретная панель</div>;
}

Практические паттерны: архитектурная организация#

Паттерн 1: Оптимизация навигации по табам с сохранением позиции скролла#

При переключении вкладок или фильтров пагинации прыжок скролла в координаты (0, 0) раздражает пользователя. Использование опции scroll={false} решает эту проблему:

'use client';

import Link from 'next/link';
import { useSearchParams } from 'next/navigation';

export function DashboardTabs() {
  const searchParams = useSearchParams();
  const currentTab = searchParams.get('tab') ?? 'overview';

  return (
    <div className="flex border-b border-border space-x-4">
      {['overview', 'logs', 'metrics'].map((tab) => (
        <Link
          key={tab}
          href={`/dashboard?tab=${tab}`}
          scroll={false} // Предотвращает скачок страницы наверх
          className={`pb-2 text-sm capitalize transition-colors ${
            currentTab === tab
              ? 'border-b-2 border-accent-violet font-semibold text-text-primary'
              : 'text-text-muted hover:text-text-primary'
          }`}
        >
          {tab}
        </Link>
      ))}
    </div>
  );
}

Распространённые ошибки: граничные сбои и безопасность#

Вопросы на собеседовании: Staff / Lead уровень#