Navigace podle kotvíc v Next.js s useAnchorObserver

Navigace pomocí kotvy v jednostránkové aplikaci na Next.js

V jednostránkových aplikacích na Next.js umožňuje navigace pomocí kotvy přechod mezi sekcemi bez opětovného načítání stránky. Hook useAnchorObserver z knihovny react-use-observer-hooks automatizuje synchronizaci posouvání a URL: detekuje viditelnou sekci při posouvání a posune na kotvu při změně adresy.

Mechanismus funguje obousměrně: posouvání aktualizuje URL přes IntersectionObserver, a změna URL (klik nebo tlačítko "zpět") spustí posun k sekci. Tím se eliminují zpětnovazební smyčky a zajišťuje správná funkce s historií prohlížeče.

Příprava projektu

Použijte Next.js 15 s Pages Router, React 19 a Tailwind CSS v4. Nainstalujte závislost:

npm install react-use-observer-hooks

Vypněte vestavěné obnovení posouvání v next.config.ts, abyste předešli konfliktu s hookem:

const nextConfig = {
  experimental: {
    scrollRestoration: false,
  },
};

Vytvořte catch-all route [[...slug]].tsx pro zpracování cest /, /about, /contact na jedné stránce.

Hlavní kód stránky

Definujte pole sekcí s href, label a komponentami:

import { useAnchorObserver } from 'react-use-observer-hooks';
import { useRouter } from 'next/router';

const SECTIONS = [
  { href: '/',        label: 'Domů',    Component: HomeSection },
  { href: '/about',   label: 'O nás',   Component: AboutSection },
  { href: '/contact', label: 'Přidejte se', Component: ContactSection },
];

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

  const { ref, focusedAnchor } = useAnchorObserver<HTMLDivElement>({
    anchors: SECTIONS.map(s => s.href),
    currentAnchor: router.asPath,
    onAnchorChange: (anchor) => {
      router.push(anchor, undefined, { scroll: false, shallow: true });
    },
  });

  return (
    <>
      <Navbar sections={SECTIONS} activeHref={focusedAnchor} />

      <div ref={ref}>
        {SECTIONS.map(({ href, Component }) => (
          <section key={href} style={{ minHeight: '100vh' }}>
            <Component />
          </section>
        ))}
      </div>
    </>
  );
}

Klíčové aspekty:

• ref se aplikuje na kontejner sekcí. Hook mapuje přímé potomky podle indexu na pole anchors.
• scroll: false v router.push zabraňuje automatickému posouvání Next.js.
• shallow: true optimalizuje navigaci bez opětovného vykreslení serveru.

Navigační komponenta

Navbar používá <Link> se stejnými možnostmi:

import Link from 'next/link';

export const Navbar = ({ sections, activeHref }) => (
  <nav>
    {sections.map(({ href, label }) => (
      <Link
        key={href}
        href={href}
        scroll={false}
        shallow
        className={activeHref === href ? 'active' : ''}
      >
        {label}
      </Link>
    ))}
  </nav>
);

focusedAnchor automaticky zvýrazní aktivní položku podle viditelné sekce.

Chování aplikace

Výsledná implementace zajišťuje:

• Otevření přímým odkazem /about přímo v požadované sekci.
• Správnou funkci tlačítka "zpět" prohlížeče.
• Indexování vyhledávači podle jedinečných URL.
• Synchronizaci menu s viditelným obsahem.

Co je důležité

• Hook useAnchorObserver plně automatizuje obousměrnou synchronizaci posouvání a URL.
• Vypnutí scrollRestoration je nezbytné pro předejití konfliktů.
• Catch-all routy Pages Router jsou vhodné pro SPA-podobnou navigaci.
• shallow: true + scroll: false minimalizují opětovné vykreslování.
• Podpora historie prohlížeče a SEO přímo z krabice.

— Editorial Team