Anker-Navigation in Next.js mit useAnchorObserver

Anker-Navigation in einer Next.js Single-Page-Anwendung

In Next.js Single-Page-Anwendungen ermöglicht die Anker-Navigation nahtlose Übergänge zwischen Abschnitten ohne Neuladen der Seite. Der useAnchorObserver-Hook aus der react-use-observer-hooks-Bibliothek automatisiert die Scroll- und URL-Synchronisation: Er erkennt den sichtbaren Abschnitt während des Scrollens und scrollt zum Anker, wenn sich die Adresse ändert.

Der Mechanismus funktioniert bidirektional: Scrollen aktualisiert die URL via IntersectionObserver, während URL-Änderungen (durch Klicks oder die Zurück-Taste) das Scrollen zum Abschnitt auslösen. Dies verhindert Rückkopplungsschleifen und gewährleistet eine korrekte Browser-Historie-Verwaltung.

Projekt-Setup

Verwenden Sie Next.js 15 mit Pages Router, React 19 und Tailwind CSS v4. Installieren Sie die Abhängigkeit:

npm install react-use-observer-hooks

Deaktivieren Sie die integrierte Scroll-Wiederherstellung in next.config.ts, um Konflikte mit dem Hook zu vermeiden:

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

Erstellen Sie eine Catch-All-Route [[...slug]].tsx, um Pfade wie /, /about, /contact auf einer einzelnen Seite zu behandeln.

Hauptseiten-Code

Definieren Sie ein Array von Abschnitten mit href, Label und Komponenten:

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

const SECTIONS = [
  { href: '/',        label: 'Startseite',    Component: HomeSection },
  { href: '/about',   label: 'Über uns',   Component: AboutSection },
  { href: '/contact', label: 'Kontakt', 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>
    </>
  );
}

Wichtige Aspekte:

• ref wird auf den Abschnitts-Container angewendet. Der Hook ordnet direkte Kinder nach Index dem anchors-Array zu.
• scroll: false in router.push verhindert das automatische Scrollen von Next.js.
• shallow: true optimiert die Navigation ohne Server-Neurendering.

Navigations-Komponente

Navbar verwendet <Link> mit denselben Optionen:

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 markiert automatisch das aktive Element basierend auf dem sichtbaren Abschnitt.

Anwendungsverhalten

Die resultierende Implementierung bietet:

• Direkten Link-Zugriff auf /about, der im korrekten Abschnitt landet.
• Korrekte Browser-Zurück-Tasten-Funktionalität.
• Suchmaschinen-Indexierung mit eindeutigen URLs.
• Menü-Synchronisation mit sichtbarem Inhalt.

Wichtige Punkte

• Der useAnchorObserver-Hook automatisiert vollständig die bidirektionale Scroll- und URL-Synchronisation.
• Das Deaktivieren von scrollRestoration ist essenziell, um Konflikte zu vermeiden.
• Catch-All-Routes im Pages Router eignen sich für SPA-ähnliche Navigation.
• shallow: true + scroll: false minimieren Neurenderings.
• Browser-Historie und SEO-Unterstützung sind von Haus aus vorhanden.

— Editorial Team