Навігація та посилання в 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 15+ та 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 рівень#