Was ist Next.js und warum und wie wird es im Jahr 2022 verwendet?

Die Arbeit an einer modernen JavaScript-Anwendung mit React ist meisterhaft, bis man einige Probleme beim Rendern des gesamten Inhalts auf der Client-Seite entdeckt. Server-Rendering, auch bekannt als statisches Pre-Rendering, löst diese Probleme. Next.Js ist ein React-Framework, das es dem Benutzer ermöglicht, alle Dinge direkt auszuführen, aber es ist nicht darauf beschränkt. Es wird als Toolchain mit einem Befehl und ohne Konfiguration für React-Projekte befürwortet. Es geht hauptsächlich darum, attraktive, hochdynamische, interaktive und performante Webanwendungen für verschiedene Plattformen wie Mac, Windows und Linux zu entwerfen.

Aber wie genau funktioniert das Framework? Lassen Sie uns etwas Zeit damit verbringen, zu untersuchen, was Next.js und React sind und wie sie helfen können.

Also zuerst, was ist Next.js?

Next.js ist ein React-Framework, mit dem Benutzer einseitige Javascript-Apps erstellen können. Dieses Framework hat verschiedene Vorteile sowohl für die Apps der Kunden als auch für das Entwicklungsteam. Als Nutzer kann man zunehmend irritiert werden, wenn unsere Erwartungen von Websites und Apps, die länger als Millisekunden zum Laden brauchen, nicht erfüllt werden. Next.js ist weit verbreitet und aus verschiedenen Gründen eine gute Wahl; Die meisten sind geschwindigkeits- und leistungsabhängig.

Kernfunktionen:

• Reichhaltige Benutzererfahrung
• Gute Leistung
• Schnellere Feature-Entwicklung

Rendering-Methoden in Next.js

Rendering ist eine unvermeidliche Einheit, die es dem Benutzer ermöglicht, den in React geschriebenen Code in die HTML-UI-Darstellung umzuwandeln. Das Rendern kann auf dem Client und dem Server erfolgen, und zwar entweder vor einer Anforderung zur Erstellungszeit oder nach jeder Anforderung zur Laufzeit.

a. Serverseitiges Rendern (SSR)

SSR ist die Fähigkeit einer Anwendung, die es dem Entwickler ermöglicht, HTML-Dateien auf dem Server in eine vollständig gerenderte HTML-Client-Seite zu konvertieren. Der Hauptvorteil der Verwendung von SSR als Lösung besteht darin, dass der Entwickler denselben Code verwenden kann, um eine schnellere Benutzererfahrung bei der Verwendung benutzerdefinierter Daten bereitzustellen. SSR ist in der Lage, Daten abzurufen und die Webseite vorab mit benutzerdefinierten Inhalten zu füllen, während die zuverlässige Internetverbindung des Servers genutzt wird. Wenn der Entwickler beispielsweise eine index.html-Datei hat, die an den Client geliefert werden muss, besteht eine hohe Wahrscheinlichkeit, dass der Entwickler einen Metadatentyp hat, höchstwahrscheinlich die Metadaten der Homepage. Es wird nicht kontextualisiert, wenn der Entwickler eine andere Route teilen möchte. Daher wird keine Ihrer Routen auf anderen Websites mit relevanten Benutzerinformationen (Beschreibung und Vorschaufoto) angezeigt, die Benutzer mit der Welt teilen möchten.

b. Vorab-Rendering

Pre-Rendering ist eine attraktive Alternative oder Lösung für obligatorische Server, die für universelle Apps verwendet werden, die für eine kleine Anwendung entweder abschreckend oder übertrieben sind. Mit anderen Worten, Pre-Rendering bezieht sich auf die Generierung von HTML im Voraus auf dem Server, anstatt von JavaScript auf dem Gerät des Benutzers durchgeführt zu werden. Manches Material von einer anderen Seite oder Site kann vorgerendert werden, wenn der Benutzer eine Webseite durchsucht, um sich darauf vorzubereiten, dass ein Benutzer sie als nächstes besucht. Da einige Elemente der Seite vorzeitig gerendert wurden, wird die neue Seite schnell geladen.

Wenn der Browser es beispielsweise zulässt, wird die erste Webseite in den Suchergebnissen von Google immer vorgerendert. Google geht davon aus, dass auf das oberste Ergebnis geklickt wird, und fordert daher den Browser auf, diese Seite darzustellen.

c. Verzögertes Rendern (ISR)

Innerhalb des Next.js-Frameworks wird verzögertes Rendering als Incremental Static Regeneration (ISR) bezeichnet, das erstmals in Version 9.4 implementiert wurde. Es ähnelt dem Pre-Rendering; nur die angeforderte Seite wird während des anfänglichen Builds nicht gerendert; es wird gerendert, wenn ein Benutzer es anfordert. Benutzer sehen die vorgerenderte Version der Seite, bis ein neuer Build stattfindet oder bis ein bestimmtes Cache-Timeout abläuft. ISR zielt darauf ab, die Zeit zu verkürzen, die zum Erstellen einer großen Website benötigt wird, indem es dem Entwickler ermöglicht, die Erstellung weniger stark frequentierter Seiten zu verschieben. Es kann auch von Fall zu Fall Seiten basierend auf benutzergenerierten Inhalten rendern.

Was können Sie mit Next.Js erstellen und wann sollten Sie Next.Js verwenden?

Durch die Verwendung von Next.js kann ein Benutzer zahlreiche digitale Produkte und Schnittstellen erstellen, wie zum Beispiel:

• MVP (Minimum Viable Product): MVP ist eine Produktversion, die genügend Funktionen umfasst, um vom frühen Kunden verwendet zu werden und die Produktidee im Produktentwicklungszyklus zu validieren. Beispielsweise kann der MVP das Produktteam bei der Änderung und Integration von Produkten als frühes Benutzerfeedback in der Softwareindustrie unterstützen.
• Jamstack-Websites: Jamstack wird als die neue Standardarchitektur im Webkontext bezeichnet. JAMstac ist eine moderne Webentwicklungsarchitektur, die von Markup (JAM), JavaScript und APIs abgeleitet wird. JAMstack kann nicht als diskrete Technologie spezifiziert werden; Andererseits ist es eine andere Technik zum Erstellen von Apps und Websites.
• Webportale : Ein Portal ist eine webbasierte Plattform, die Daten aus mehreren Quellen in einer einzigen Benutzeroberfläche sammelt und sie den Benutzern auf die für ihre Situation am besten geeignete Weise anzeigt. Einfache Webportale haben sich zu Systemen entwickelt, die im Laufe der Zeit digitale Kundenerlebnisse ermöglichen.
• Einzelne Webseiten: Eine Single-Page-Website, manchmal auch als One-Page-Website bezeichnet, ist eine Website, die nur eine HTML-Seite hat. Es gibt keine zusätzlichen Seiten wie „Kontakt“, „Über uns“ oder „Funktionsseite“.
• Statische Websites: Eine statische Website (auch als flache oder stationäre Seite bezeichnet) wird genau so angezeigt, wie sie in einem Computerbrowser gespeichert ist. Es besteht aus HTML-codierten Webseiten, die auf einem Webserver gespeichert werden. Es ändert sich nicht; es bleibt für alle Website-Besucher gleich oder „statisch“.
• Webprogrammierung oder Datenbankdesign sind für eine statische Website nicht erforderlich. Statische Websites sind die grundlegendsten und am einfachsten zu gestaltenden, was sie ideal für kleine Websites macht. Die Pflege vieler statischer Seiten kann schnell zu einer zeitraubenden und ineffizienten Aufgabe werden.
• SaaS-Produkte: SaaS-Produkte sind Internet-Software, die von einem zentralen Anbieter gehostet wird und allen Benutzern den Zugriff ermöglicht, z. B. Text-Expander. DropBox, Google Apps und Canva sind einige der prominentesten Beispiele für SaaS-Produkte.
• E- Commerce- und Einzelhandels-Websites: Eine Website ermöglicht es Einzelpersonen, physische Waren, Dienstleistungen und digitale Produkte online zu kaufen und zu verkaufen, anstatt in einem tatsächlichen Geschäft. Ein Unternehmen kann über eine E-Commerce-Website Bestellungen abwickeln, Zahlungen empfangen, Versand und Logistik verwalten und Kundenbetreuung anbieten.
• Dashboards: Ein Dashboard ist eine visuelle Darstellung oder Anzeige der Daten eines Benutzers. Es enthält Links zu wertvollen Tools und wichtigen Informationen, die auf der Website angezeigt werden.
• Progressive Webanwendungen (PWA): PWA ist eine Softwareanwendung, die mit Standard-Webtechnologien wie Javascript und HTML erstellt wurde.
• Interaktive Benutzerschnittstellen: Die Benutzerschnittstelle (UI) ist der Interaktions- und Kommunikationspunkt zwischen Menschen und Computern in einem Gerät. Beispiele dafür sind Bildschirme, Tastaturen, Mäuse und das Erscheinungsbild eines Desktops. Es kann sich auch darauf beziehen, wie ein Benutzer mit einem Programm oder einer Website interagiert.
• Blog: Ein Blog ist ein rückwärts chronologisches Online-Tagebuch, eine regelmäßig aktualisierte Webseite oder eine Informationswebsite, die Material in umgekehrt chronologischer Reihenfolge anzeigt, wobei die neuesten Beiträge ganz oben stehen. Es ist eine Plattform, auf der ein Autor oder eine Gruppe von Autoren ihre Gedanken zu einem bestimmten Thema äußern kann.

NEXT.JS und JAMSTACK

Jamstack ist eine Webarchitektur, die darauf abzielt, das Web reaktionsschneller, sicherer und skalierbarer zu machen. Es baut auf vielen Tools und Workflows auf, die Entwickler schätzen, und hilft ihnen, ihre Zeit optimal zu nutzen. Pre-Rendering und Entkopplung sind wesentliche Prinzipien, die es ermöglichen, Websites und Anwendungen mit mehr Sicherheit und Zuverlässigkeit bereitzustellen. Jamstack arbeitet mit verschiedenen statischen Website-Generatoren wie Hugo, Jekyll, Gatsby, Nuxt, Huxo, Slate, Docsify, Gitbook, Docusaurus, Scully usw. Next.js entwickelt sich zu einem der beliebtesten React-Frameworks zum Erstellen von Jamstack-Websites, die beide schnell sind und SEO-freundlich. Es funktioniert gut mit Headless-CMS und E-Commerce-Plattformen, um außergewöhnliche Leistung und SEO-Vorteile zu bieten.

Next.js-Funktionen

• Hot Code Reloading: Wenn Änderungen im Code gespeichert werden, wird das Programm automatisch neu geladen.
• Automatisches Code-Splitting: Diese Funktionalität bündelt und bedient jede Seite bei jedem Import im Code. Es bedeutet, dass kein Code mehr auf die Website geladen wird.
• Ökosystemkompatibilität: JavaScript, Node und React sind mit dem Next.js-Ökosystem kompatibel.
• Server-Rendering: Render-Reaktionskomponenten effizient auf dem Server, bevor HTML an den Client gesendet wird.
• Styled-JSX: Styled-JSX styled-jsx ist eine JavaScript-Erweiterung, mit der Sie CSS direkt in den Code schreiben können.
• Automatisches Vorabrufen: Nur im Darstellungsbereich angezeigte Links werden von Next.js vorab abgerufen, das die Intersection Observer API verwendet, um sie zu erkennen. Next.js deaktiviert auch das Prefetching im Falle einer langsamen Netzwerkverbindung oder wenn der Benutzer (Save-Data) aktiviert hat. Basierend auf den folgenden Prüfungen fügt es dynamisch <link rel="preload"> Tags ein, um Komponenten für nachfolgende Navigationen herunterzuladen. Next.js führt kein JavaScript aus; es holt es nur. Dadurch wird verhindert, dass andere Inhalte heruntergeladen werden, die die vorab abgerufene Seite möglicherweise anfordert, bis der Benutzer auf den Link klickt.
• Statische Exporte: Der Benutzer kann next export verwenden, um Next zu exportieren. Js-Anwendung auf statisches HTML kann ohne Node ausgeführt werden. Js-Server.
• TypeScript-Unterstützung: Next.js bot eine integrierte TypeScript-Erfahrung von Anfang an.

Statische Site-Generierung mit Next.js

Statische Websites sind so alt wie das Internet. Mit dem Aufstieg von JavaScript gewannen statische Websites jedoch an Reibung auf dem Markt und machten sie dynamischer. Das Zusammenstellen und Rendern einer Website oder App zur Erstellungszeit ist eine statische Generierung. Das Ergebnis ist eine Sammlung statischer Dateien, die die HTML-Datei selbst und Assets wie JavaScript und CSS enthalten. Wie wir sie kennen, funktionieren JavaScript-basierte Web-Apps, indem sie zur Laufzeit Bibliotheken wie React oder Skripte im Browser ausführen. Wenn ein Browser eine Seite empfängt, besteht diese normalerweise aus einfachem HTML mit wenig Inhalt. Die Skripte werden dann geladen, wodurch das Material in die Seite gezogen werden kann, was als Hydratation bezeichnet wird. Static Generation verwendet Technologien wie Next.js, um eine Seite so darzustellen, wie sie im Browser erscheinen würde, jedoch zur Kompilierzeit. Dadurch können wir den gesamten Inhalt beim anfänglichen Laden bereitstellen. Die Skripte befeuchten die Seite während dieses Vorgangs immer noch, aber idealerweise mit weniger Änderungen oder keinen Änderungen.

• Next.js versucht, alle Seiten nach Möglichkeit statisch zu generieren. Next.js tut dies, indem es den von einer App entwickelten Prozess des Datenabrufs erkennt.
• Next.js stellt APIs wie getStaticProps und getServerSideProps , um Daten abhängig von ihrer Verwendung beim Erstellen der App für den Benutzer abzurufen.
• Wenn der Benutzer getStaticProps verwendet, findet Next.js heraus, ob der Server diese Seiten rendern muss.
• Next.js lädt alle Daten, wenn jemand die Seite vom Server anfordert, in Verbindung mit einem Bereitstellungssystem wie Vercel, das die Serverkonfiguration automatisch übernimmt.
• Nachdem die App entwickelt wurde, bietet Next.js die Möglichkeit, die App als statische Dateien in ein separates Verzeichnis zu exportieren. Dies ist jedoch standardmäßig nicht der Fall.
• Der Entwickler erstellt zuerst die App und führt dann den nächsten Export aus, wodurch die App standardmäßig als statische Dateien im Verzeichnis „out“ verfügbar wird.

Vorteile von Next.js

Für Unternehmer

Wir können zweifellos feststellen, dass jedes Unternehmen seine Konversionsrate verbessern möchte, was sich direkt auf den Umsatz auswirkt. Diese Unternehmen müssen neue Technologien einsetzen, um ein wirklich einzigartiges Benutzererlebnis zu bieten, das sowohl aktuellen als auch potenziellen Kunden gerecht wird. Next.JS unterstützt sie, indem es ihnen die vollständige Kontrolle über das endgültige Design ihrer Websites, Online-Shops, Anwendungen und anderer digitaler Produkte ermöglicht. Darüber hinaus sind Sie nicht durch Themen oder Plugins eingeschränkt, die für eine bestimmte E-Commerce-Plattform oder ein Content Management System (CMS) spezifisch sind.

• Anpassungsfähigkeit und Reaktionsfähigkeit: Weiter. js bietet anpassbare Websites und Anwendungen gemäß der Bildschirmgröße des Geräts)
• Kurze Seitenladezeit und einzigartiges Erlebnis vor Ort.
• Datensicherheit: Mit NextJS erstellte statische Webseiten haben keinen direkten Zugriff auf die Datenbank, Abhängigkeiten, Benutzerdaten oder andere sensible Informationen. Dies gewährleistet die Sicherheit der Daten.
• Schnellere Markteinführung: NextJS ist dank mehrerer vordefinierter Komponenten eine hervorragende Methode, um so schnell wie möglich ein MVP zu erstellen. Mit dieser Entwicklungsmethode können Sie schnell Feedback sammeln und Änderungen an Ihrem Produkt vornehmen, ohne Zeit oder Geld zu verlieren.
• Vollständiger Omnichannel: NextJS-basierte Websites und Anwendungen funktionieren auf jedem Gerät, sodass Sie Ihre Produkte und Dienstleistungen über viele Kanäle anbieten können.
• Besucher und Kunden werden mit der Leistung von NextJS-Websites und Web-Apps zufrieden sein, da statische Websites von Natur aus schnell sind.
• Support nach Bedarf: Mit zunehmender Beliebtheit von React und NextJS steigt auch die Anzahl der Entwickler. Infolgedessen ist es einfach, eine Agentur oder einen Freiberufler zu finden, um notwendige Änderungen vorzunehmen.

Für Marketer

Im Zusammenhang mit den Vorteilen, die Vermarkter von Next.js erhalten. Einige herausragende Vorteile sind die Steigerung der Konversionsrate, der SEO-Effizienz und des organischen Verkehrs.

• Höhere Konversions- und Verkaufszahlen: Vermarkter profitieren von NextJS, da Websites und Online-Anwendungen schnell, leicht und einfach zu scannen sind, was zur Verbesserung des Google-Rankings beiträgt. Mit steigenden Google-Rankings steigt der organische Traffic, was zu höheren Konversions- und Verkaufsraten führt.
• Einzigartige Benutzererfahrung: Dieser Vorteil ist in der E-Commerce-Branche deutlicher sichtbar, wo Online-Shops, in denen Unternehmen NFT.js verwenden, um sich in einem hart umkämpften globalen Markt zu differenzieren und zu behaupten.

Für Entwickler

Entwickler legen großen Wert auf wiederverwendbare React-Komponenten, die Kosten und Entwicklungszeit reduzieren.

• CSS-Parser: CSS-Dateien können von Entwicklern aus einer JavaScript-Datei importiert werden. Neue Teile verbesserten die CSS-Verarbeitung und hoben zuvor nicht erkannte Probleme hervor.
• Schnelle Aktualisierung: Leicht sichtbare Änderungen an React-Komponenten.
• Integrierte Bildkomponente und automatische Bildoptimierung: Diese Funktion optimiert Fotos automatisch für Sie. Es unterstützt jetzt AVIF-Bilder, die 20 Prozent kleiner sind als WebP-Bilder.
• Community-Unterstützung: Die Zahl der Mitwirkenden von NextJS wächst parallel zu seiner Popularität. Anstatt bei Null anzufangen, können Entwickler damit wahrscheinlich bereits vorhandene Lösungen finden.
• Hybrid aus serverseitigem Rendering-SSR und statischer Site-Generierung SSG: Ermöglicht dem Benutzer das Vorab-Rendern von Seiten zur Anforderungs- oder Build-Zeit in einem einzelnen Projekt.
• Inkrementelle statische Regeneration: Es ermöglicht Webentwicklern, bestehende Websites im Hintergrund zu aktualisieren, wenn der Datenverkehr eingeht, indem sie neu gerendert werden. Statische Inhalte können so dynamisch werden.
• TypeScript-Unterstützung: automatische TypeScript-Konfiguration und -Kompilierung.
• Zero Config: NextJS übernimmt die Kompilierung und Bündelung für Sie. Mit anderen Worten, es ist von Grund auf darauf ausgelegt, produktiv zu sein.
• Datenabruf: Je nach Anwendungsfall der App werden mehrere Ansätze zum Rendern von Inhalten verwendet. Dies umfasst sowohl das serverseitige Rendering oder die Erstellung statischer Sites für das Pre-Rendering als auch die inkrementelle statische Regenerierung zum Aktualisieren oder Produzieren von Inhalten zur Laufzeit.
• API-Routen: Als serverlose Node.js-Funktion ist es einfach, einen API-Endpunkt zu erstellen.
• Code-Splitting: Teilen Sie den Code und stellen Sie Komponenten nur dann bereit, wenn sie benötigt werden, um die Größe der ersten Nutzlast Ihrer App zu verringern.
• Rust-basierter Compiler SWC: SWC, ein Rust-basierter Compiler, konvertiert und minimiert JavaScript-Code für die Produktion. Nächste. js verfügt über einen brandneuen Rust-Compiler, der das Bündeln und Erstellen optimiert hat, was zu 3-mal schnelleren lokalen Aktualisierungen und 5-mal schnelleren Produktions-Builds führt.
• Middleware: Ermöglicht dem Benutzer, Code auszuführen, bevor eine Anforderung abgeschlossen ist, wodurch der Benutzer Code über die Konfiguration verwenden kann. Benutzer können Anforderungsantworten ändern und Benutzer von einer Route zu einer anderen umleiten.

Nachteile von NextJS

Obwohl sich NextJS schnell weiterentwickelt und neue Funktionen hinzufügt, hat es immer noch bestimmte Nachteile und Bedenken, die unten aufgeführt sind:

• Kosten der Flexibilität: Next JS hat nur wenige eingebaute Startseiten, was den Entwickler dazu zwingt, die gesamte Front-End-Schicht von Grund auf neu zu erstellen.
• Entwicklung und Verwaltung: Wenn der Benutzer NextJS verwenden möchte, um einen Online-Shop einzurichten, aber kein internes Entwicklungsteam hat, benötigt der Benutzer eine engagierte Person, die die Entwicklung und Verwaltung überwacht.
• Fehlen eines integrierten Statusmanagers: Wenn Redux, MobX oder ähnliches benötigt werden, benötigt der Benutzer einen Statusmanager.
• Die geringe Anzahl an Plugins: Im Vergleich zu anderen Pendants wie Gatsby.js kann der Benutzer nicht so viele leicht anpassbare Plugins verwenden.

Ist Next.js besser als Gatsby?

Gatsby kombiniert die besten Teile von React, GraphQL und React-Router, um einen entwicklerfreundlichen statischen Site-Generator zu erstellen. Gatsby generiert statische HTML-Dateien, die von einem CDN geladen werden können. Wenn Gatsby-Apps zu groß werden oder enorme Datenmengen abrufen, verursachen sie bekanntermaßen Probleme und verzögern Builds. Next.js ist ideal, wenn die App mehr als 100.000 Seiten hat oder enorme Datenmengen abrufen muss (z. B. ein Geschäft mit vielen Produkten mit Varianten).

Beide sind geeignete Optionen für das serverseitige Rendern, jedoch in zwei verschiedenen Optionen. Das Ergebnis mit Gatsby ist ein statischer Site-Generator ohne Server, wenn der Benutzer beabsichtigt, die Site zu erstellen. Es ist nun erforderlich, die Entwicklung des Build-Prozesses statisch auf Netlify oder einer anderen statischen Hosting-Site bereitzustellen. Next.js bietet ein Backend, das eine Antwort auf eine Anfrage auf der Serverseite rendern kann, sodass Benutzer dynamische Websites auf Plattformen entwickeln können, die Node.js unterstützen. Next.js kann auch eine statische Site generieren, aber wir würden nicht sagen, dass dies der primäre Anwendungsfall ist.

Wenn das Ziel darin besteht, eine statische Website zu erstellen, kann es schwierig sein, sich zu entscheiden, und Gatsby verfügt möglicherweise über ein überlegenes Ökosystem von Plugins, darunter viele für das Bloggen.

Gatsby basiert auch stark auf GraphQL, das die Anforderungen je nach Benutzeroptionen und -anforderungen erfüllen kann.

Wie installiere ich Node.js unter Windows?

Um Next.js zu installieren, müssen Sie Node.js installieren.

Laden Sie den Windows Installer von der offiziellen Website von nodejs herunter.

Oder hier ist die alternative Methode zur Installation von Node.Js

Mit Winget

 winget install OpenJS.NodeJS # or for LTS winget install OpenJS.NodeJS.LTS

Chocolatey verwenden

 cinst nodejs # or for full install with npm cinst nodejs.install

Scoop verwenden

 scoop install nodejs

Um sicherzustellen, dass Node.Js ordnungsgemäß installiert ist, führen Sie diesen Befehl aus

 C:\Users\Admin> node -v

Verwenden von create-next-app

Eine andere Möglichkeit, mit Nex.js zu beginnen, ist mit create-next-app . Es ist ein CLI-Tool, mit dem Sie eine Nex.js-Anwendung erstellen können. Um dies zu verwenden, müssen Sie das Paket npx_command installieren, das Ihnen hilft, Javascript-Befehle auszuführen. Verwenden Sie einen der folgenden Befehle, um loszulegen.

 npx [email protected] # or yarn create next-app # or pnpm create next-app

Der Befehl erfordert den Anwendungsnamen und erstellt einen neuen Ordner mit diesem Namen, lädt dann alle erforderlichen Pakete herunter ( react , respond react-dom , next ) und setzt die package.json auf:

Sie können die Beispiel-App mit npm run dev

Sie erhalten ein Ergebnis wie dieses http: // localhost:3000:

Schritte zum Installieren und Ausführen der Next.js-Anwendung

Schritt 1: Sie können node.js von hier erhalten. Führen Sie diese Befehle im Terminal aus, um die Installation zu bestätigen.

 node -v npm -v

Schritt 2: Erstellen Sie nun einen Ordner für Ihr Projekt, navigieren Sie mit Ihrem Code-Editor dorthin und führen Sie den folgenden Befehl auf dem Terminal aus.

 npm init -y npm install --save next react react-dom

Fügen Sie das folgende Skript in der Datei package.json hinzu

 { "scripts": { "dev": "next", "build": "next build", "start": "next start" } }

Schritt 3: Fügen Sie eine Datei index.js im Seitenordner hinzu und fügen Sie den folgenden Code darin ein

 import React from'react'; import Link from'next/link'; export default class extends React.Component { render() { return ( { // This is Jsx contains HTML // code in Javascript} <div> <h1>Hello Emizentech</h1> { // This is Styled-jsx contains // CSS code in Javascript} <style jsx>{` a{ color:grey; text-decoration:none; } `}</style> } </div> ) } }

Schritt 4: Starten Sie die Anwendung mit npm start.

Ausgabe

Wie füge ich TypeScript zu Next.js hinzu?

 # run 'touch' to create an empty config file # Next will auto-populate it touch tsconfig.json # then you'll be prompted to run the command: npm install -D typescript @types/react @types/node # now you can use TypeScript everywhere

So fügen Sie Ihrer next.js-App Seiten und Routen hinzu

Um Ihrer App eine About-Seite hinzuzufügen, legen Sie Ihre Komponente in /pages/about.js oder .tsx für TypeScript ab.

 export default function About() { return <div>About</div> }

Links und Navigation

Das Next-Framework hat auch eine Link Komponente von next/link .

Wenn Sie auf die Homepage (/) und eine Blog-Route (z. B. /blog/emizen) verlinken möchten, würden wir Folgendes in /pages/about.js aufnehmen:

 import Link from "next/link"; export default function About() { return ( <div> <h1>About Me</h1> <div> <Link href="/"> <a>Home</a> </Link> <Link href="/blog/emizen"> <a>Blog Post</a> </Link> </div> </div> ); }

href ist ein erforderliches Prop für die Link -Komponente und die Daten können ihr auch als Objekt übergeben werden:

 import Link from "next/link"; export default function About() { return ( <div> <h1>About Me</h1> <div> <Link href={{ pathname: "/about" }}> <a>Home</a> </Link> <Link href={{ pathname: "/blog/[slug]", query: { slug: "emizen" }, }} > <a>Blog Post</a> </Link> </div> </div> ); }

SEO in Next.js

In Next können Sie die Head -Komponente von next/head verwenden, um Metadaten zu Webseiten hinzuzufügen:

 import Link from "next/link"; import Head from "next/head"; export default function About() { return ( <div> <Head> <title>About | IT Site</title> <meta name="description" content="A website Emizentech/> </Head> <h1>About Me</h1> <div> <Link href="/"> <a>Home</a> </Link> <Link href="/blog/emizen"> <a>Blog Post</a> </Link> </div> </div> ); }

API-Routen

Nextjs ermöglicht das Erstellen von Full-Stack-React-Apps durch Schreiben von Servercode über eine Funktion namens API-Routen.
Um Ihre eigene API zu erstellen, die als separate serverlose Funktionen ausgeführt wird, erstellen Sie einen Ordner mit dem Namen „api“ in /pages.

Wenn Sie Daten von /api/about für die About-Seite abrufen möchten, fügen Sie eine Seite namens about.js in /pages/api ein

 // syntax is very similar to the "Express" Node.js framework // here we are responding to every request with an OK (200) code and sending JSON data back (our name) export default function handler(req, res) { res.status(200).json({ name: "Reed Barger" }); }

Fordern Sie Daten clientseitig an

Um Daten von unseren API-Routen anzufordern, besteht der herkömmliche Ansatz darin, sie mit useEffect und useState :

 import Link from "next/link"; import { useEffect, useState } from "react"; export default function About() { const [data, setData] = useState(null); const [isLoading, setLoading] = useState(false); useEffect(() => { setLoading(true); fetch("api/about") .then((res) => res.json()) .then((data) => { setData(data); setLoading(false); }); }, []); if (isLoading) return <p>Loading...</p>; if (!data) return <p>No about data</p>; return ( <div> <h1>My name is: {data.name}</h1> </div> ); }

Fordern Sie Daten serverseitig an

Diese beiden Funktionen helfen uns, Daten vom Server abzurufen.

 getServerSideProps #or getStaticProps

Die Funktionen befinden sich in derselben Datei wie die React-Komponenten, und der Code für sie wird separat vom React-Client gebündelt.

GetServerSideProps

Jeder Seitenbesuch löst die Ausführung von getServerSideProps aus. Daher ist es äußerst nützlich auf Seiten, die dynamische Daten enthalten oder erfordern, dass jedes Mal Anforderungen ausgeführt werden, z. B. das Abrufen authentifizierter Benutzerdaten.

 export default function About({ name }) { return ( <div> <h1>My name is: {name}</h1> </div> ); } export function getServerSideProps() { return { props: { name: "Vivek Khatri" }, }; }

Diese Funktion ermöglicht es, Daten vom Server zu senden und sie in die Requisiten der Seitenkomponente einzufügen.

Es ermöglicht dem React-Client, die Daten sofort anzuzeigen, ohne Verzögerung und ohne sich mit Lade- oder Fehlerzuständen befassen zu müssen.

Wenn Sie Daten vom Server abrufen möchten, können Sie getServerSideProps async mit dem Schlüsselwort async .

 export default function About({ name }) { return ( <div> <h1>My name is: {name}</h1> </div> ); } export async function getServerSideProps() { const data = await fetch("https://xyz.com/api").then((res) => res.json() ); return { props: { name: data.results[0].name.first }, }; }

Wir rufen Daten dynamisch von der XYZ-API ab, und die Daten ändern sich bei jeder Seitenaktualisierung.

GetStaticProps

getStaticProps Funktion ist besser für statische Seiten, die sich selten ändern. Diese Funktion führt Servercode aus und sendet eine GET-Anforderung an den Server, aber nur einmal, wenn das Projekt abgeschlossen ist.

Wenn die App in der Entwicklung ausgeführt wird, fordert sie bei jeder Aktualisierung der Seite Daten an, ähnlich wie bei getServerSideProps.

Während der Entwicklung stellt getStaticProps nur Anfragen bei jedem Seitenbesuch.

Wenn Sie den yarn build ausführen und dann den Produktionsaufbau oder Ihr React-Projekt mit yarn start ausführen, erhalten Sie denselben Namen, der beim Erstellen des Projekts angefordert wurde, nicht zur Laufzeit.

getServerSideProps und getStaticProps können nur GET-Anforderungen stellen. API-Routen können jede Art von Datenlese- und Aktualisierungsanforderung verarbeiten (d. h. in Kombination mit einer Datenschicht wie einer Datenbank).

Next.js-Beispiele

Weitere Next.js-Beispiele finden Sie hier

Top Next JS-Vorlagen

Material-Dashboard

NextJS Material ist ein Open-Source-Material-UI-React-Dashboard, das von Googles Material Design inspiriert ist. Materialprinzipien sind eine Reihe einfacher und eleganter Komponenten. Die beliebten Frameworks Material-UI, NextJS und React wurden verwendet, um das NextJS Material Dashboard zu erstellen.

Material-Kit

NextJS Material Kit ist ein kostenloses Material Design Kit für NextJS, React und Material-UI. Das NextJS Material Kit enthält über 100 einzelne Frontend-Elemente, die dem Benutzer das Mischen und Anpassen ermöglichen. Farbvariationen sind für alle Komponenten möglich, die der Benutzer mit SASS- und JSS-Dateien (innerhalb von JS-Dateien) und Klassen einfach ändern kann.

Argon

Das NextJS Argon Dashboard umfasst über 100 verschiedene Komponenten, die der Benutzer nach Belieben mischen und anpassen kann. Durch Ändern der im Projekt enthaltenen SAAS-Dateien kann der Benutzer dieses Open-Source-React-Dashboard einfach personalisieren.

Nicht wir

Komponenten mit vollständigem Code Notus NextJS umfasst über 100 verschiedene Komponenten, die der Benutzer je nach Bedarf mischen und anpassen kann. Alle Komponenten können Farbvariationen haben, die Sie mit Tailwind-CSS-Klassen einfach ändern können.

Wo können Sie Next.js lernen?

• Sie können die offizielle Website besuchen, um Next.js zu lernen
• Eine weitere Option ist React Bootcamp
• Next.js auf Udemy

und es gibt viele weitere Online-Ressourcen, die Ihnen helfen werden, Next.js zu meistern

Fazit

Es spielt keine Rolle, ob Sie robuste, komplexe Software entwickeln, die Millionen von Menschen bedienen wird, oder ob Sie einen Webshop schnell erweitern. In beiden Fällen können Sie die Vorteile moderner Webtechnologien wie Next.js nutzen, um Ihr Geschäft online effizienter zu gestalten. SEO und UX Next.js helfen Ihnen dabei, das Internet zu einem besseren, saubereren und benutzerorientierteren Ort zu machen, um Ihre Seitengeschwindigkeit zu verbessern. Statisch generierte Seiten reagieren immer noch: Next.js wird Ihre Anwendung auf der Client-Seite mit Feuchtigkeit versorgen, sodass sie vollständig interaktiv ist.

Auf der Suche nach einem talentierten Next.js- oder Full-Stack-Entwickler? Wir halten Ihnen den Rücken frei! Wir stellen Ihnen alle Tools und Fachkenntnisse zur Verfügung, die Sie benötigen, um sofort mit der Planung und Ausführung Ihres Next.js-Projekts zu beginnen.

Häufig gestellte Fragen zu Next.Js