Client-seitige Navigation
Die Link-Komponente ermöglicht client-seitige Navigation zwischen zwei Seiten derselben Next.js-Anwendung.
Client-seitige Navigation bedeutet, dass der Seitenübergang mit JavaScript erfolgt, was schneller ist als die standardmäßige Navigation durch den Browser.
Hier ist eine einfache Möglichkeit, dies zu überprüfen:
- Verwenden Sie die Entwicklertools des Browsers, um die
background-CSS-Eigenschaft von<html>aufyellowzu ändern. - Klicken Sie auf die Links, um zwischen den beiden Seiten hin und her zu wechseln.
- Sie werden sehen, dass der gelbe Hintergrund während der Seitenübergänge erhalten bleibt.
Dies zeigt, dass der Browser die Seite nicht vollständig lädt und die client-seitige Navigation funktioniert.
Wenn Sie stattdessen <a href="…"> anstelle von <Link href="…"> verwendet hätten, würde die Hintergrundfarbe bei Klicks auf die Links zurückgesetzt werden, da der Browser eine vollständige Aktualisierung durchführt.
Code-Splitting und Prefetching
Next.js führt automatisch Code-Splitting durch, sodass jede Seite nur das lädt, was für diese Seite notwendig ist. Das bedeutet, dass beim Rendern der Startseite der Code für andere Seiten zunächst nicht geladen wird.
Dadurch wird sichergestellt, dass die Startseite schnell geladen wird, selbst wenn Sie hunderte von Seiten haben.
Das Laden des Codes nur für die angeforderte Seite bedeutet auch, dass Seiten isoliert werden. Wenn eine bestimmte Seite einen Fehler verursacht, funktioniert der Rest der Anwendung weiterhin.
Darüber hinaus prefetcht Next.js in einer Produktionsversion automatisch den Code für die verlinkte Seite im Hintergrund, sobald Link-Komponenten im sichtbaren Bereich des Browsers erscheinen. Wenn Sie auf den Link klicken, ist der Code für die Zielseite bereits im Hintergrund geladen, und der Seitenübergang erfolgt nahezu augenblicklich!
Zusammenfassung
Next.js optimiert Ihre Anwendung automatisch für die beste Leistung durch Code-Splitting, client-seitige Navigation und Prefetching (in der Produktion).
Sie erstellen Routen als Dateien unter pages und verwenden die eingebaute Link-Komponente. Es sind keine zusätzlichen Routing-Bibliotheken erforderlich.
Weitere Informationen zur Link-Komponente finden Sie in der API-Referenz für next/link und allgemein zum Routing in der Routing-Dokumentation.
Hinweis: Wenn Sie auf eine externe Seite außerhalb der Next.js-Anwendung verlinken müssen, verwenden Sie einfach ein
<a>-Tag ohneLink.