Navigation zwischen Seiten

Im vorherigen Kapitel haben Sie das Dashboard-Layout und die Seiten erstellt. Nun fügen wir einige Links hinzu, um Benutzern die Navigation zwischen den Dashboard-Routen zu ermöglichen.

Warum Navigation optimieren?

Traditionell würden Sie für die Verlinkung zwischen Seiten das <a>-HTML-Element verwenden. Derzeit nutzen die Sidebar-Links <a>-Elemente, aber beachten Sie, was passiert, wenn Sie zwischen den Seiten Home, Rechnungen und Kunden in Ihrem Browser navigieren.

Haben Sie es bemerkt?

Bei jeder Seitenavigation erfolgt eine vollständige Seitenaktualisierung!

Die <Link>-Komponente

In Next.js können Sie die <Link />-Komponente verwenden, um zwischen Seiten Ihrer Anwendung zu verlinken. <Link> ermöglicht Client-seitige Navigation mit JavaScript.

Um die <Link />-Komponente zu verwenden, öffnen Sie /app/ui/dashboard/nav-links.tsx und importieren Sie die Link-Komponente aus next/link. Ersetzen Sie dann das <a>-Tag durch <Link>:

import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
 
// ...
 
export default function NavLinks() {
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

Wie Sie sehen, ähnelt die Link-Komponente der Verwendung von <a>-Tags, aber anstelle von <a href="…"> verwenden Sie <Link href="…">.

Speichern Sie Ihre Änderungen und überprüfen Sie, ob es in Ihrem lokalen Host funktioniert. Sie sollten nun zwischen den Seiten navigieren können, ohne eine vollständige Aktualisierung zu sehen. Obwohl Teile Ihrer Anwendung auf dem Server gerendert werden, erfolgt keine vollständige Seitenaktualisierung, was sich wie eine native Web-App anfühlt. Warum ist das so?

Automatische Code-Aufteilung und Prefetching

Um das Navigationserlebnis zu verbessern, teilt Next.js Ihre Anwendung automatisch nach Routensegmenten auf. Dies unterscheidet sich von einer traditionellen React-SPA, bei der der Browser Ihren gesamten Anwendungscode beim ersten Seitenaufruf lädt.

Die Aufteilung des Codes nach Routen bedeutet, dass Seiten isoliert werden. Wenn eine bestimmte Seite einen Fehler verursacht, funktioniert der Rest der Anwendung weiterhin. Dies bedeutet auch weniger Code, den der Browser analysieren muss, was Ihre Anwendung schneller macht.

Darüber hinaus lädt Next.js in der Produktionsumgebung automatisch den Code für die verlinkte Route im Hintergrund vor (prefetching), sobald <Link>-Komponenten im sichtbaren Bereich des Browsers erscheinen. Wenn der Benutzer auf den Link klickt, ist der Code für die Zielseite bereits im Hintergrund geladen, was den Seitenübergang nahezu verzögerungsfrei macht!

Erfahren Sie mehr über die Funktionsweise der Navigation.

Muster: Aktive Links anzeigen

Ein gängiges UI-Muster ist das Anzeigen eines aktiven Links, um dem Benutzer anzuzeigen, auf welcher Seite er sich befindet. Dazu müssen Sie den aktuellen Pfad des Benutzers aus der URL abrufen. Next.js bietet einen Hook namens usePathname(), mit dem Sie den Pfad überprüfen und dieses Muster implementieren können.

Da usePathname() ein React-Hook ist, müssen Sie nav-links.tsx in eine Client-Komponente umwandeln. Fügen Sie die React-Direktive "use client" am Anfang der Datei hinzu und importieren Sie dann usePathname() aus next/navigation:

'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
 
// ...

Weisen Sie als Nächstes den Pfad einer Variablen namens pathname innerhalb Ihrer <NavLinks />-Komponente zu:

export default function NavLinks() {
  const pathname = usePathname();
  // ...
}

Hinweis: nav-links.tsx ist keine spezielle Datei für Next.js – sie kann beliebig benannt werden. Wenn Sie sie umbenennen, stellen Sie sicher, dass Sie die Importanweisungen entsprechend aktualisieren.

Sie können die im Kapitel CSS-Styling eingeführte clsx-Bibliothek verwenden, um Klassennamen bedingt anzuwenden, wenn der Link aktiv ist. Wenn link.href mit dem pathname übereinstimmt, sollte der Link mit blauem Text und einem hellblauen Hintergrund angezeigt werden.

Hier ist der finale Code für nav-links.tsx:

'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';
 
// ...
 
export default function NavLinks() {
  const pathname = usePathname();
 
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className={clsx(
              'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
              {
                'bg-sky-100 text-blue-600': pathname === link.href,
              },
            )}
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

Speichern Sie und überprüfen Sie Ihren lokalen Host. Sie sollten nun sehen, dass der aktive Link blau hervorgehoben ist.