Next.js ist ein beliebtes Open-Source-Framework, das auf React aufbaut und Entwicklern beim Erstellen servergerenderter React-Anwendungen helfen soll. Eine seiner leistungsstarken Funktionen ist die Möglichkeit, dank der integrierten Next/Link-Komponente clientseitige Übergänge zwischen Seiten zu erstellen, ohne ein vollständiges Neuladen der Seite auszulösen. In diesem Artikel erfahren Sie, wie Sie next/link verwenden, indem Sie eine kleine Next.js-Anwendung erstellen.
Was kommt als nächstes/Link?
Der weiter/Link ist eine React-Komponente, mit der Sie Links zwischen Seiten in einer Next.js-Anwendung erstellen können. Im Gegensatz zu einem normalen HTML-Ankertag weiter/Link löst kein Neuladen der gesamten Seite aus, wenn der Benutzer auf den Link klickt. Stattdessen wird die clientseitige Navigation verwendet, um die neue Seite zu laden und gleichzeitig den aktuellen Status der Anwendung beizubehalten. Dies bedeutet, dass sich Ihre Anwendung schneller anfühlt und besser auf Benutzer reagiert.
Syntax: Die Syntax für die Verwendung Verknüpfung ist geradeaus. Sie können die Komponente aus importieren weiter/Link Modul:
// Import import Link from 'next/link'; // Link component New Page>
Anschließend können Sie die Link-Komponente in Ihrem JSX-Code verwenden, um einen Link zu einer anderen Seite zu erstellen. Der href prop gibt die URL der Seite an, auf die Sie verlinken möchten, und das untergeordnete Element der Seite Verknüpfung Komponente ist der Inhalt des Links.
Erstellen Sie eine NextJS-Anwendung: Öffnen Sie ein Terminal oder eine Eingabeaufforderung und führen Sie den folgenden Befehl aus
Laden Sie YouTube-Videos auf VLC herunter
npx create-next-app next-link>
Navigieren Sie zu Ihrem App-/Projektverzeichnis:
cd next-link>
Projektstruktur:
NextJs next/link
Grundlegende Verwendung von „next/link“: In diesem Beispiel erstellen wir eine einfache Next.js-Anwendung mit zwei Seiten: heim Und um . Wir werden verwenden weiter/Link um eine Verknüpfung zwischen den Seiten herzustellen.
Erstellen Sie ein neues Verzeichnis mit dem Namen Seiten im Stammverzeichnis Ihres Projekts. Hier speichern Sie Ihre Next.js-Seiten. Erstellen Sie eine neue Datei mit dem Namen index.js im Inneren Seiten Verzeichnis. Das wird das sein heim Seite Ihrer Bewerbung. Fügen Sie den folgenden Code hinzu index.js:
Dateiname: index.js
Javascript
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
>
>
Führen Sie den Entwicklungsserver mit dem folgenden Befehl aus:
npm run dev>
Öffnen Sie Ihren Webbrowser und navigieren Sie zu http://localhost:3000 . Sie sollten das sehen heim Seite Ihrer Bewerbung mit einer Liste von Blog Beiträge. Klicken Sie auf einen der Links, um zur einzelnen Beitragsseite zu navigieren. Sie sollten das sehen Blog Beitrag mit dem entsprechenden Schnecke in der URL.
Ausgabe:
NextJs next/link
In diesem Beispiel haben wir die Verwendung demonstriert weiter/Link mit dynamischem Routing. Wir haben eine neue Seitenvorlage für Einzelpersonen erstellt Blog Beiträge und verwendet Verknüpfung um Links zu jeder einzelnen Beitragsseite zu erstellen. Wir haben auch das verwendet useRouter Haken aus next/router um darauf zuzugreifen Schnecke Parameter aus der URL und zeigen Sie den entsprechenden an Blog Post.
Abschließend, weiter/Link ist ein leistungsstarkes Tool, das die Navigation in Next.js-Anwendungen vereinfacht und ein schnelles und reaktionsschnelles clientseitiges Rendering ermöglicht. Aufgrund seiner einfachen Syntax und Benutzerfreundlichkeit ist es bei Entwicklern eine beliebte Wahl für die Erstellung von Links zwischen Seiten und dynamisches Routing.