Nextjs für alle - mit einigen Grundkenntnissen in React

Mit einigen grundlegenden React- und JavaScript-Kenntnissen sind Sie auf dem Weg

Next.js ist ein von Zeit erstelltes JavaScript-Framework. Mit React können Sie serverseitiges Rendering und statische Webanwendungen erstellen. Es ist ein großartiges Tool, um Ihre nächste Website zu erstellen. Es hat viele großartige Funktionen und Vorteile, die Nextjs zu Ihrer ersten Option für die Erstellung Ihrer nächsten Webanwendung machen können.

Sie benötigen keine Konfiguration von Webpack oder Ähnlichem, um Next.js zu verwenden. Es kommt mit seiner Konfiguration. Sie müssen npm run devlediglich Ihre Anwendung ausführen und mit dem Erstellen beginnen.

In diesem Artikel werden wir die großartigen Funktionen und Tricks von Next.js untersuchen und wie Sie damit beginnen können, Ihre nächste Website damit zu erstellen.

In diesem Beitrag wird davon ausgegangen, dass Sie über Grundkenntnisse in React und JavaScript verfügen.

Hier sind einige großartige Websites, die mit Next.js erstellt wurden:

  • Syntaxt.fm
  • npmjs
  • material-ui.io
  • expo.io
  • codemenitor.io

Ich habe sogar Nextjs verwendet, um meine persönliche Website zu erstellen. Sayhayani.me - den Quellcode auf GitHub finden Sie hier.

Erste Schritte mit Next.js

Um mit Next.js zu beginnen, muss node.js auf Ihrem Computer installiert sein, und das ist alles. Next.js ist wie jede andere node.js-Anwendung - Sie benötigen npm oder Yarn, um Abhängigkeiten zu installieren.

Beginnen wir mit der Erstellung eines Next.js-Projekts.

Zuerst müssen wir einen Ordner erstellen und ihm einen Namen unserer Wahl geben. Ich werde es nennen nextjs-app.

Mit dieser Befehlszeile können Sie dies ganz einfach tun:

mkdir nextjs-app

Nachdem Sie den Ordner nextjs-app erstellt haben, öffnen Sie ihn auf dem Terminal. Ausführen npm init , um die package.json Datei zu erstellen .

Als nächstes müssen wir unsere Abhängigkeiten installieren.

Next.js installieren

  • Geben Sie mit Garn ein
yarn add next
  • Geben Sie mit npm Folgendes ein:
npm i next --save

Dann müssen wir React installieren, da Next.js React verwendet. In der ersten Zeile unten wird Garn für die Installation verwendet.

yarn add react react-dom
// with npm
npm i react react-dom --save

Danach müssen Sie zwei notwendige Ordner erstellen: pagesund static. Next.js wird ohne sie nicht funktionieren !!

mkdir pages static

Sie müssen diese Struktur haben, nachdem Sie die folgenden Befehle ausgeführt haben:

nextjs-app -pages -static -package.json

Und dann können Sie einfach ausführen npm next devund dann //localhost:3000/ in Ihrem Browser öffnen .

Die NotFoundSeite wird angezeigt, da wir noch keine Seite haben!

Erstellen wir also eine homeSeite und einen Einstiegspunkt index.js.

touch index.js home.js

Und dann können Sie eine normale React-Komponente schreiben. Wie oben erwähnt, dient Next.js zum Erstellen von React-Anwendungen.

So home.jssieht unser aus:

Und hier ist unsere index.jsAkte:

Next.js verfügt über eine Live-Reload-Funktion. Alles, was Sie tun müssen, ist nur zu ändern und zu speichern, und Next.js kompiliert und lädt die App automatisch für Sie neu.

Hinweis : Next.js ist wie jedes andere serverseitige Rendering-Tool, das wir zum Definieren der Standardseite unserer Anwendung benötigen index.js.

Diese Änderung wird nach dem Ausführen im Browser angezeigt npm next dev:

Herzliche Glückwünsche! Wir haben gerade eine Next.js-App mit ein paar einfachen Schritten erstellt. Diese Anweisungen zum Erstellen einer Next.js-App sind in den offiziellen Dokumenten von Next.js beschrieben.

Meine Alternative

Normalerweise benutze ich diesen Weg nicht. Ich verwende stattdessen die CLI "Create-Next-App", die all diese Dinge in einer einzigen Zeile für mich erledigt.

npx create-next-app my-app

In der Dokumentation finden Sie weitere Funktionen.

Erstellen Sie benutzerdefinierte Konfigurationen für Next.js.

Manchmal möchten Sie Ihrer Next.js-App möglicherweise zusätzliche Abhängigkeiten oder Pakete hinzufügen.

Next.js bietet Ihnen die Möglichkeit, Ihre Konfiguration mithilfe einer next-config.jsDatei anzupassen .

Beispielsweise möchten Sie Ihrer App möglicherweise Sass-Unterstützung hinzufügen. In diesem Fall müssen Sie das next-sass-Paket verwenden und es next-config.jswie im folgenden Beispiel zur Datei hinzufügen :

Installieren Sie zunächst next-sass:

yarn add @zeit/next-sass

Fügen Sie es dann in die next-config.jsDatei ein:

Und dann können Sie Ihren Sass-Code schreiben und in Ihre Komponente importieren:

Importieren der Sass-Datei in unsere Komponente:

Und hier ist das Ergebnis:

Wow, war es nicht super einfach , unserer Next.js-App Sass-Unterstützung hinzuzufügen?

Zu diesem Zeitpunkt haben wir nur den Installations- und Konfigurationsteil behandelt. Lassen Sie uns nun über die Funktionen von Next.js sprechen!

Die Funktionen

Next.js bietet eine Reihe großartiger Funktionen wie serverseitiges Rendern, Router und verzögertes Laden.

Serverseitiges Rendern

Next.js führt standardmäßig serverseitiges Rendern durch. Dadurch wird Ihre Anwendung für Suchmaschinen optimiert. Sie können auch jede Middleware wie express.js oder Hapi.js integrieren und jede Datenbank wie MongoDB oder MySQL ausführen.

Next.js enthält eine HeadKomponente, mit der Sie dynamische Meta-Tags hinzufügen und erstellen können. Es ist meine Lieblingsfunktion - Sie können benutzerdefinierte und dynamische Meta-Tags erstellen. Dadurch kann Ihre Website von Suchmaschinen wie Google indiziert werden. Hier ist ein Beispiel für eine HeadKomponente:

Und Sie können die HeadKomponente auf jeder anderen Seite importieren und verwenden :

Genial!

Hinweis : Mit Next.js müssen Sie React nicht importieren, da Next.js dies für Sie erledigt.

Generieren einer statischen Website mit Next.js.

Neben dem serverseitigen Rendern können Sie Ihre Anwendung weiterhin als statische HTML-Website kompilieren, exportieren und auf einer statischen Website wie einer GitHub-Seite oder netlify bereitstellen. Weitere Informationen zum Erstellen einer statischen Website mit Next.js finden Sie hier in den offiziellen Dokumenten.

Router

Dies ist eine weitere der großartigen Funktionen von Next.js. Wenn Sie die Create-React-App verwenden, müssen Sie normalerweise den React-Router installieren und seine benutzerdefinierte Konfiguration erstellen.

Next.js wird mit eigenen Routern ohne Konfiguration geliefert. Sie benötigen keine zusätzliche Konfiguration Ihrer Router. Erstellen Sie einfach Ihre Seite im pagesOrdner und Next.js kümmert sich um die gesamte Routing-Konfiguration.

Lassen Sie uns fortfahren und eine benutzerdefinierte Navigation erstellen, um alles klar zu machen!

Um zwischen den Seiten zu navigieren, verfügt Next.js über die LinkMethode zum Verwalten der Navigation.

Lassen Sie uns erstellen blog.jsund contact.jsSeiten:

blog.js

Und hier ist die contact.jsSeite:

Und jetzt müssen wir in der Lage sein, zwischen diesen Seiten zu navigieren?

Wow das so einfach und super genial.

Faules Laden

Durch das verzögerte Laden bietet Ihre Anwendung eine bessere Benutzererfahrung. Manchmal kann das Laden der Seite einige Zeit dauern. Der Benutzer kann Ihre App verlassen, wenn das Laden länger als 30 Sekunden dauert.

Um dies zu vermeiden, verwenden Sie einen Trick, um dem Benutzer anzuzeigen, dass die Seite geladen wird, z. B. indem ein Drehfeld angezeigt wird. Das verzögerte Laden oder Aufteilen von Code ist eine der Funktionen, mit denen Sie das langsame Laden bewältigen und steuern können, sodass Sie nur den erforderlichen Code auf Ihre Seite laden.

Next.js verfügt über eine eigene Methode zur Codeaufteilung. Es bietet uns eine Methode, die aufgerufen dynamicwird, um unsere Komponente zu laden, wie im folgenden Beispiel:

Den Quellcode dieser Beispiele finden Sie auf GitHub

Das ist alles. Ich hoffe, das reicht und ich hoffe, dieser Artikel gibt Ihnen eine klare Vorstellung von Next.js und seinen Funktionen. Weitere Informationen zu anderen Funktionen finden Sie in den offiziellen Dokumenten.

Wenn Sie weitere Ergänzungen zu diesem Beitrag haben, können Sie unten einen Kommentar hinterlassen. Wenn Ihnen dieser Beitrag gefällt, klicken Sie bitte auf Klatschen. und Teile.

Auf Twitter diskutieren?.

Übrigens habe ich kürzlich mit einer starken Gruppe von Software-Ingenieuren für eine meiner mobilen Anwendungen zusammengearbeitet. Die Organisation war großartig und das Produkt wurde sehr schnell geliefert, viel schneller als andere Firmen und Freiberufler, mit denen ich zusammengearbeitet habe, und ich denke, ich kann sie ehrlich für andere Projekte da draußen empfehlen. Schicken Sie mir eine E-Mail, wenn Sie Kontakt aufnehmen möchten - [email protected]