Inhaltsverzeichnis[Ausblenden][Zeigen]
Bei der Auswahl einer Softwarebibliothek oder eines Frameworks wird normalerweise die Entwicklererfahrung berücksichtigt.
Wenn ich „Entwicklererfahrung“ erwähne, beziehe ich mich darauf, wie Entwickler die Arbeit tatsächlich erledigen. Entwickler wählen Bibliotheken oder Frameworks, die Spaß machen.
Dies ist einer der Hauptgründe, warum wir jetzt die beliebtesten Bibliotheken und Frameworks haben. Als Entwickler müssen wir nicht bei Null anfangen, wenn bereits vorhandene Tools erstellt wurden, um uns bei unseren Aufgaben zu unterstützen.
Frameworks sind Softwareteile, die von Entwicklern erstellt und verwendet werden, um Anwendungen zu erstellen, und NextJS ist eines davon.
In diesem Beitrag gehen wir auf Nextjs, seine wichtigsten Funktionen und darauf ein, wie wir damit eine Anwendung erstellen können. Lassen Sie uns gleich einsteigen.
Was ist Next.js?
Next.js ist ein JavaScript-Framework zum schnellen und einfachen Erstellen statischer Webseiten und React-basierter Online-Anwendungen. Sie können damit großartige Web-Apps für eine Vielzahl von Plattformen entwerfen, darunter Windows, Linux und Mac.
Sie sollten mit dem Next.js-Framework vertraut sein, wenn Sie nur minimal mit React vertraut sind und mehr über das React-Ökosystem erfahren möchten.
Obwohl Next.js alles enthält, was Sie für den Einstieg benötigen, können Sie zwischen NPM und Yarn, JavaScript und TypeScript, CSS und SCSS, statischem Export und serverloser Bereitstellung wählen.
Eigenschaften
- Das Routing erfolgt automatisch – Sie müssen nichts konfigurieren, da jede URL dem Dateisystem und den Dateien im Seitenordner zugeordnet wird (Sie haben natürlich Anpassungsoptionen).
- Komponenten einer einzelnen Datei – Mit styled-jsx, das vollständig integriert ist und von demselben Team erstellt wird, können der Komponente auf einfache Weise Stile hinzugefügt werden.
- Neuladen eines Hotcodes – Wenn Next.js eine auf der Festplatte gespeicherte Änderung erkennt, lädt es die Seite neu.
- Dynamische Komponenten – Sie können JavaScript-Module und React-Komponenten dynamisch laden.
- Statische Exporte – Mit Next.js können Sie mit dem nächsten Exportbefehl eine vollständig statische Site aus Ihrer App exportieren.
- Kompatibilität mit der Umgebung – Next.js lässt sich nahtlos in die JavaScript-, Node- und React-Ökosysteme integrieren.
- Codes automatisch aufteilen – Nur die Bibliotheken und das JavaScript, die erforderlich sind, werden zum Rendern von Seiten verwendet. Anstatt eine einzelne JavaScript-Datei zu erstellen, die den gesamten Code der App enthält, teilt Next.js die App intelligent in viele Ressourcen auf.
Wie erstelle ich eine next.js-Anwendung?
Installation
Sie können den Befehl node npx verwenden, um ein Next.js-Projekt zu installieren und zu erstellen.
Dadurch werden ein Ordner und alle Dateien, Konfigurationen und andere Elemente generiert, die zum Ausführen eines Next.js-Projekts erforderlich sind.
Sie können die App starten, sobald sie generiert wurde.
Seiten & Routing
Um Routen mit Next.js zu handhaben, müssen wir kein Routing-Framework verwenden. Das Routing mit Next.js ist kinderleicht einzurichten. Wenn Sie den Befehl create-next-app verwenden, um eine neue Next.js-App zu erstellen, erstellt die App standardmäßig einen Ordner namens „pages“.
In diesem Ordner „Seiten“ verwalten Sie Ihre Routen. Als Ergebnis wird jede Reaktionskomponentendatei im Unterverzeichnis als separate Route behandelt.
Wenn der Ordner beispielsweise diese Dateien enthält:
- index.js
- über.js
- aricles.js
Diese Datei wird automatisch auf drei Arten transformiert:
- Die Indexseite localhost/index
- Die About-Seite localhost/about
- Die Blogseite localhost/articles
Unten sehen Sie ein Beispiel für eine about.js-Seite. Wie Sie sehen, wird nichts über die Seite bereitgestellt. Es ist einfach eine standardmäßige React-Funktionskomponente.
Routen
Um verschachtelte Routen zu erstellen, müssen Sie zunächst einen Unterordner erstellen. Zum Beispiel: Seiten/Artikel. Erstellen Sie Ihre „contact.js“-Reaktionskomponente in diesem Ordner, und sie generiert die Seite „localhost/articles/contact“.
Wenn Sie eine Datei in pages/articles.js und eine andere in pages/articles/index.js ablegen. Beide geben denselben Pfad localhost/blog wieder. In dieser Situation rendert Next.js nur die Datei article.js. Was ist mit dynamischen Routen, bei denen jeder Blogbeitrag seinen eigenen Pfad hat:
- localhost/blog/erster-artikel
- localhost/blog/-zweiter-artikel
Mithilfe der Klammernotation können Sie in Next.js eine dynamische Route definieren. Zum Beispiel: Seiten/Artikel/[Slug].js
Verbindungsrouten
Sie haben jetzt Ihre erste Route abgeschlossen. Ich vermute, Sie fragen, wie Sie Seiten mit diesen Routen verbinden können. Dazu benötigen Sie 'next/link'.
Hier ist ein Beispiel für eine Startseite, die einen Link zur Info-Seite enthält:
Wenn Sie den Link formatieren möchten, verwenden Sie die folgende Syntax:
Routen umleiten
Was ist, wenn Sie eine Weiterleitung auf eine bestimmte Seite erzwingen müssen? Zum Beispiel, wenn eine Taste gedrückt wird? Sie können dies erreichen, indem Sie 'router.push' verwenden:
SEO
Seiten in Webanwendungen erfordern zusätzlich zu den Daten im HTML-Text Meta-(Kopf-)Elemente. Dies erfordert die Installation einer zusätzlichen Anforderung namens React-Helm in einer React-Anwendung.
Wir können die Head-Komponente von next/head in Next verwenden, um auf einfache Weise Metadaten zu unseren Webseiten hinzuzufügen, die in Suchergebnissen und Einbettungen angezeigt werden:
Komponenten
Häufig müssen Sie Komponenten oder eine Layoutdatei entwickeln. Beispielsweise eine Komponente, die die Navigationsleiste rendert. Bisher haben wir nur den Seitenordner verwendet. Was ist, wenn Ihre Komponente keine Routenseite sein soll?
Sie möchten nicht, dass der Benutzer zu einer Seite wie localhost/navbar navigiert. Wenn Sie die Navbar.js-Komponente im Seitenordner platzieren, passiert genau das. Was sollten Sie in der Situation tun?
Speichern Sie einfach alle Ihre „Not a Page“-Komponenten in einem separaten Ordner. Die meisten Next.js-Projekte verwenden den Moniker „components“, und dieser Ordner wird im Stammordner Ihres Projekts generiert.
Kopfkomponente
Das anfängliche Laden der Seite wird serverseitig von Next.js gerendert. Dazu wird der HTML-Code Ihrer Seite geändert. Der Header-Bereich ist enthalten.
Die Head-Komponente von Next.js wird verwendet, um Header-Abschnitts-Tags wie Titel und Meta bereitzustellen. In diesem Beispiel einer Layout-Komponente wird die Head-Komponente verwendet.
404-Seite erstellen nicht gefunden
Es ist möglich, eine eigene 404-Fehlerseite zu erstellen. Möglicherweise möchten Sie die Nachricht anpassen oder Ihr eigenes Seitendesign hinzufügen. Erstellen Sie im Seitenordner die Datei 404.js.
Wenn ein 404-Fehler auftritt, leitet Next.js automatisch auf diese Seite weiter. Hier ist ein Beispiel für eine personalisierte 404-Seite:
Datenabruf von der Serverseite
Anstatt Daten auf der Client-Seite herunterzuladen, ermöglicht Ihnen Next.js, eine anfängliche Datenauffüllung durchzuführen, was bedeutet, dass die Seite mit den bereits vom Server aufgefüllten Daten gesendet wird.
Sie haben zwei Möglichkeiten, den serverseitigen Datenabruf zu implementieren:
- Daten sollten bei jeder Anfrage abgerufen werden.
- Daten nur einmal während des Bauprozesses erhalten (statische Seite)
Abrufen von Daten bei jeder Anfrage
Die getServerSideProps-Methode wird zum serverseitigen Rendern jeder Anforderung verwendet. Diese Funktion kann am Ende Ihrer Komponentendatei eingefügt werden. Next.js füllt Ihre Komponentenprops automatisch mit dem getServerSideProps-Objekt, wenn diese Funktion in Ihrer Komponentendatei vorhanden ist.
Abrufen von Daten zur Build-Zeit
Die getStaticProps-Methode wird verwendet, um zur Erstellungszeit serverseitig zu rendern. Diese Funktion kann am Ende Ihrer Komponentendatei eingefügt werden. Diese Methode führt den Servercode aus und sendet eine GET-Anforderung an den Server, aber nur einmal, wenn unser Projekt abgeschlossen ist.
Warum sollten Sie Next.js lernen?
Einer der Gründe dafür ist, dass Next.js auf React aufbaut, einem Front-End-Entwicklungs-Toolkit für Erstellen von Benutzeroberflächen das ist meine bevorzugte Wahl für das Entwerfen von Web-Apps.
Aber es wäre nicht genug, wenn Next.js nicht gut in dem wäre, was es tut … richtig?
Also, was genau macht es?
Wir müssen zuerst einige Konzepte definieren, um es zu verstehen. Next.js gewann an Popularität, weil es ein Problem löste, das viele Webentwickler mit clientseitigen Web-Apps (im Browser) hatten. Diese Single-Page-Anwendungen (SPAs) hatten eine bessere Erfahrung, da der Benutzer die Seite nicht neu laden musste und mehr Interaktivität ermöglichte.
Da der Großteil des Materials in einer solchen App jedoch erst sichtbar wird, wenn sie im Browser ausgeführt wird, haben Webcrawler Schwierigkeiten, den Textinhalt einer solchen App zu verstehen.
Infolgedessen blieben viele SPAs trotz ihrer Popularität für große Suchmaschinen wie Google weitgehend anonym. Next.js enthält jetzt einen robusteren integrierten Mechanismus für das serverseitige Rendern (SSR) von React-Komponenten.
Next.js ermöglicht es Entwicklern, während des Build-Prozesses JavaScript-Code auf dem Server zu erstellen und dem Benutzer grundlegendes, indexierbares HTML bereitzustellen.
Vorteile
- Großartig für die Benutzererfahrung
- Großartig für SEO
- Erstellen Sie eine superschnelle statische Website, die sich wie eine dynamische verhält
- Flexibilität beim Erstellen von UI & UX.
- Viele Entwicklungsvorteile
- Großartige Community-Unterstützung
Nachteile
- Websites oder Anwendungen haben eine gewisse Zeit für den Aufbau oder die Entwicklung.
- Für bestimmte Aufgaben ist Next.js unzureichend. Entwickler sollten in der Lage sein, dynamische Routen mit Node.js-Tools zu erstellen.
Zusammenfassung
Wie Sie sehen können, vereinfacht Next.js die Entwicklung von React-Apps und ermöglicht es Ihnen, sich auf das zu konzentrieren, was am wichtigsten ist – Ihre App-Logik und Benutzeroberfläche. Es enthält alles, was zum Erstellen zeitgemäßer, Frontend-reicher und API-gestützter Apps benötigt wird.
Aufgrund seiner Fähigkeit, statische HTML-Seiten zu erstellen, eignet es sich auch für reine Inhaltsprojekte wie Blogs und Unternehmenswebsites.
Mit den aktuellen Editionen behält Next.js nicht nur ein hohes Maß an Entwicklererfahrung bei, sondern bietet auch Tools zur Steigerung der visuellen Leistung und des Benutzererlebnisses und sichert so eine glänzende Zukunft für dieses Framework.
Hinterlassen Sie uns einen Kommentar