Navigationsoptimierung

Jetzt, da wir alle erforderlichen Seiten haben, lassen Sie uns erkunden, wie Benutzer sich zwischen ihnen bewegen können. Traditionell könnten wir das standardmäßige HTML-<a>-Tag verwenden. Das Problem bei diesem Ansatz ist jedoch, dass er einen vollständigen Seitenneuladen auslöst, was die Benutzererfahrung beeinträchtigt.

Next.js schlägt vor, die <Link>-Komponente zu verwenden, die es uns ermöglicht, die clientseitige Navigation zu erleichtern.

Zurück zum Projekt

Um die clientseitige Navigation zu implementieren, greifen Sie auf app/ui/dashboard/nav-links.tsx zu, importieren Sie die Link-Komponente aus next/link und ersetzen Sie das <a>-Tag durch <Link>.

Nach dem Speichern Ihrer Änderungen testen Sie Ihr localhost, um eine nahtlose Seitennavigation ohne Seitenaktualisierung zu ermöglichen.

In der Praxis