Next.js ist ein Open-Source-Framework, das für die Arbeit mit React entwickelt wurde. Es wird verwendet, um Landingpages, SEO-freundliche Websites, E-Commerce-Shops und alle Arten von Webanwendungen zu erstellen, die schnelle und leistungsstarke Ladezeiten benötigen. Auf der anderen Seite Typoskript ist eine auf JavaScript aufbauende Programmiersprache, die Next.js unterstützt. Diese beiden zusammen bieten eine bessere Erfahrung sowohl für den Benutzer als auch für den Entwickler..
Next.js und TypeScript werden hauptsächlich als Full-Stack-Frameworks und Templating-Sprachen bzw. Erweiterungstools klassifiziert, aber schauen wir uns an, was und wie beide angewendet werden und wie sie zusammenarbeiten können, einschließlich Anwendungsbeispielen.
Next.js ist ein Open-Source-Framework, das von Vercel erstellt wurde. Es behauptet, das Softwareentwicklungskit des Webs zu sein, das alle Tools enthält, die für die Erstellung des Webs benötigt werden. Schneller“ (sic). Erfahren Sie hier mehr über die Funktionen von Next.js mit React und seinen Anwendungen.
Next.js ermöglicht es Suchmaschinen, React-Apps einfach zu optimieren ohne Konfiguration. Eine herkömmliche React-App wird auf der Clientseite gerendert, wobei der Browser mit einer Shell einer HTML-Seite beginnt, der kein gerenderter Inhalt fehlt. Von dort ruft der Browser die JavaScript-Datei ab, die den React-Code enthält, um den Inhalt der Seite zu rendern und interaktiv zu gestalten. Es gibt jedoch zwei wichtige Nachteile beim clientseitigen Rendern:
1. Der Inhalt wird nicht von allen Suchmaschinen zuverlässig indexiert oder von Social-Media-Link-Bots gelesen;
2. Es kann länger dauern, bis die erste inhaltliche Farbe erreicht ist, wenn ein Benutzer zum ersten Mal auf der Webseite landet.
Next.js ist ein Framework, mit dem Sie eine React-App erstellen können, aber rendern Sie den Inhalt vorab auf dem Server Das erste, was ein Benutzer oder Suchbot sieht, ist also das vollständig gerenderte HTML. Nach Erhalt dieser ersten Seite übernimmt das clientseitige Rendern die Kontrolle und es funktioniert genau wie eine herkömmliche React-App. Es ist das Beste aus beiden Welten: vollständig gerenderte Inhalte für Bots und hochinteraktive Inhalte für Benutzer.
Die wahre Magie kommt ins Spiel, wenn wir über Daten abrufen weil Next.js mehrere Server-Rendering-Strategien von einem einzigen Projekt aus ausführen kann. Das clientseitige Abrufen von Daten ist nützlich, wenn für Ihre Seite keine SEO-Indexierung erforderlich ist, wenn Sie Ihre Daten nicht vorrendern müssen oder wenn der Inhalt Ihrer Seiten häufig aktualisiert werden muss. Durch die statische Generierung oder das Vorrendern können Sie Ihre Seiten beim Erstellen rendern. Sehen Sie sich das folgende Beispiel an.
Im vorherigen Codeausschnitt ist ein Beispiel für das clientseitige Abrufen von Daten mit dem Effekt verwenden Haken von React.
Zuerst haben wir Konstanten initialisiert, um zu überprüfen, ob der Abruf noch aussteht, und um die Daten zu speichern, die sich aus dem Abrufvorgang ergeben. Dann rufen wir Effekt verwenden Hook mit 2 verschiedenen Argumenten:
TypeScript ist eine Programmiersprache, die von Microsoft entwickelt und gepflegt wird, und es ist eine strikte Obermenge von JavaScript. Es unterstützt statische und dynamische Typisierung und bietet außerdem Vererbungsfunktionen, Klassen, Sichtbarkeitsbereiche, Namespaces, Schnittstellen, Unions und andere moderne Funktionen. TS wurde für größere Projekte konzipiert da es einfacher ist, den Code zu refaktorieren. Erfahre mehr über seine Funktionen in einem ausführlichen Vergleich mit JavaScript.
Es gibt viele Gründe, warum ein JavaScript-Entwickler erwägt, TypeScript zu verwenden:
Hier ist eine schrittweise Anleitung zur Installation von TypeScript in einer Next.js App:
1. Basisprojekt erstellen - Befehl: npx create-next-app next-app-Beispiel.
Erstellen Sie ein Projekt mit einer Basisvorlage.
2. Hinzufügen tsconfig.json in das Stammverzeichnis des Projekts, um TypeScript zu aktivieren.
3. Strukturieren Sie das Projekt im Formular.
4. Erstellen Sie TypeScript-Typen in Next.js
Sie können Typen für alles in Ihrer Anwendung erstellen, einschließlich Requisitentypen, API-Antworten, Argumente für Funktionen usw.
Wir erstellen zuerst einen Typ für unseren alles:
5. Erstellen Sie Komponenten in Next.js
Jetzt, wo wir unsere haben ITODO Typ, wir können den erstellen Todo.tsx Komponente.
Wie Sie sehen, importieren wir zunächst den vorherigen Typ, den wir erstellt haben, und erstellen einen weiteren Typ mit dem Namen Requisiten, was die Requisiten widerspiegelt, die von der Komponente als Parameter empfangen wurden.
Diese Komponente ist verantwortlich für die Anzeige der ITODO Objekt. Diese Komponente erhält die ITODO Objekt, ein Zu erledigen markieren Funktion und eine Todo entfernen funktionieren als Requisiten. Beachten Sie, dass dieses Argument mit dem Requisitentyp übereinstimmen muss, um Typescript glücklich zu machen.
Jetzt erstellen wir unsere FormToDo.tsx Komponente, verantwortlich für das Hinzufügen Todos in unserer App.
Unsere Komponente akzeptiert die Zu erledigen hinzufügen als Parameter. Es kümmert sich um die Einreichung eines neuen Alles. Wenn der Wert nicht leer ist, dann rufen wir Zu erledigen hinzufügen Funktion auf diesen Todo-Text und setze dann den Wert des Formulars wieder auf leer. Diese Komponente gibt ein Formular zurück, das Aufgaben akzeptiert und über eine Schaltfläche zum Senden verfügt. Wenn Sie auf die Schaltfläche klicken, fügen wir die Aufgabe zur Aufgabenliste hinzu.
6. Erstellen Sie unsere Seite, um unsere React-Komponenten nutzen zu können.
Wir beginnen mit dem Import der Komponenten und Typen, die wir zuvor erstellt haben.
Nach dem Import der Komponenten und Typen haben wir importiert InfergetStaticProps Type, das von Next.js bereitgestellt wird und es uns ermöglicht, den Typ für die Methode getStaticProps festzulegen.
Danach haben wir unsere initialisiert ToDo-Liste unter Verwendung der Bundesstaat verwenden Hook, der als Argument unsere anfänglichen Todos übergibt, die vom Holen Sie sich statische Requisiten.
Schließlich haben wir unsere Hauptfunktionen deklariert, die unsere Logik implementieren:
Zu erledigen hinzufügen - ermöglicht das Hinzufügen eines Todo in unserer ListeTodo entfernen - ermöglicht entfernen ein Todo auf unserer ListeZu erledigen markieren - ermöglicht setze einen Todo als erledigt in unserer Liste
Am Ende geben wir eine Liste unserer alles, unter Verwendung unserer Komponenten.
Vielseitiger und datengesteuerter Wachstumsvermarkter mit fundierten Geschäftskenntnissen, der über die neuesten Entwicklungen in der digitalen Marketinglandschaft auf dem Laufenden gehalten wird.
Ein junger und leidenschaftlicher Entwickler, der darauf aus ist, die Art und Weise, wie Menschen ihrem täglichen Leben nachgehen, einen Unterschied zu machen.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
