So migrieren Sie von jQuery zu Next.js

Veröffentlicht: 2022-03-10
Kurze Zusammenfassung ↬ In diesem Artikel werfen wir einen genaueren Blick auf verschiedene Ansätze und Strategien, wie wir eine Webanwendung migrieren können, die das jQuery-Framework verwendet, und beginnen, eines der coolsten React-Frameworks auf dem Markt zu verwenden: Next.js.

Als jQuery 2006 auf den Markt kam, begannen viele Entwickler und Organisationen, es für ihre Projekte zu übernehmen. Die Möglichkeit, das von der Bibliothek angebotene DOM zu erweitern und zu manipulieren , ist großartig, und wir haben auch viele Plugins, um unseren Seiten Verhalten hinzuzufügen, falls wir Aufgaben erledigen müssen, die von der jQuery-Hauptbibliothek nicht unterstützt werden. Es vereinfachte viel Arbeit für Entwickler und machte JavaScript in diesem Moment zu einer mächtigen Sprache, um Webanwendungen oder Single Page Applications zu erstellen.

Das Ergebnis der Popularität von jQuery ist noch heute messbar: Fast 80 % der beliebtesten Websites der Welt verwenden es noch immer. Einige der Gründe, warum jQuery so beliebt ist, sind:

  • Es unterstützt DOM-Manipulation.
  • Es bietet CSS-Manipulation.
  • Funktioniert in allen Webbrowsern gleich.
  • Es umschließt HTML-Ereignismethoden.
  • Einfach zu erstellende AJAX-Aufrufe.
  • Einfach zu bedienende Effekte und Animationen.

Im Laufe der Jahre hat sich JavaScript stark verändert und einige Funktionen hinzugefügt, die wir in der Vergangenheit nicht hatten. Mit der Neudefinition und Weiterentwicklung von ECMAScript wurden einige der von jQuery bereitgestellten Funktionen zu den standardmäßigen JavaScript-Funktionen hinzugefügt und von allen Webbrowsern unterstützt. Dadurch wurden einige der Verhaltensweisen, die jQuery bietet , nicht mehr benötigt , da wir in der Lage sind, die gleichen Dinge mit einfachem JavaScript zu tun.

Andererseits begann sich eine neue Art des Denkens und Gestaltens von Benutzeroberflächen abzuzeichnen. Frameworks wie React, Angular oder Vue ermöglichen es den Entwicklern, Webanwendungen basierend auf wiederverwendbaren Funktionskomponenten zu erstellen. React arbeitet also mit dem „virtuellen DOM“, also einer DOM-Darstellung im Speicher, während jQuery weniger performant direkt mit dem DOM interagiert . Außerdem bietet React coole Funktionen, um die Entwicklung bestimmter Funktionen zu erleichtern, wie z. B. die Zustandsverwaltung. Mit diesem neuen Ansatz und der Popularität, die Single Page Applications zu gewinnen begannen, begannen viele Entwickler, React für ihre Webanwendungsprojekte zu verwenden.

Und die Front-End-Entwicklung entwickelte sich noch weiter, wobei Frameworks auf anderen Frameworks erstellt wurden. Das ist zum Beispiel bei Next.js der Fall. Wie Sie wahrscheinlich wissen, handelt es sich um ein Open-Source-React-Framework, das Funktionen zum Generieren statischer Seiten, zum Erstellen serverseitig gerenderter Seiten und zum Kombinieren beider Typen in derselben Anwendung bietet. Es ermöglicht auch das Erstellen von serverlosen APIs innerhalb derselben App.

Es gibt ein merkwürdiges Szenario: Obwohl diese Frontend-Frameworks im Laufe der Jahre immer beliebter werden, wird jQuery immer noch von einer großen Mehrheit von Webseiten übernommen. Einer der Gründe dafür ist, dass der Prozentsatz der Websites, die WordPress verwenden, sehr hoch ist und jQuery im CMS enthalten ist . Ein weiterer Grund ist, dass einige Bibliotheken wie Bootstrap eine Abhängigkeit von jQuery haben und es einige gebrauchsfertige Vorlagen gibt, die es und seine Plugins verwenden.

Ein weiterer Grund für diese Anzahl von Websites, die jQuery verwenden, sind die Kosten für die Migration einer vollständigen Webanwendung auf ein neues Framework. Es ist nicht einfach, es ist nicht billig und es ist zeitaufwändig. Aber am Ende bringt die Arbeit mit neuen Tools und Technologien eine Menge Vorteile: breitere Unterstützung, Unterstützung durch die Community, bessere Entwicklererfahrung und einfachere Einbindung von Leuten in das Projekt.

Es gibt viele Szenarien, in denen wir nicht der Architektur folgen müssen (oder wollen), die uns Frameworks wie React oder Next.js auferlegen, und das ist in Ordnung. jQuery ist jedoch eine Bibliothek, die viel Code und Funktionen enthält, die nicht mehr benötigt werden. Viele der Funktionen, die jQuery bietet, können mit modernen JavaScript-nativen Funktionen erreicht werden, und wahrscheinlich auf eine leistungsfähigere Weise.

Lassen Sie uns besprechen, wie wir die Verwendung von jQuery einstellen und unsere Website in eine React- oder Next.js-Webanwendung migrieren können.

Definieren Sie die Migrationsstrategie

Brauchen wir eine Bibliothek?

Abhängig von den Funktionen unserer Webanwendung könnten wir sogar den Fall haben, dass ein Framework nicht wirklich benötigt wird. Wie bereits erwähnt, wurden mehrere jQuery-Features (oder zumindest ein sehr ähnliches) in die neuesten Webstandard-Versionen aufgenommen. Also wenn man bedenkt:

  • Das Muster $(selector) von jQuery kann durch querySelectorAll() ersetzt werden.

Anstatt zu tun:

 $("#someId");

Wir können:

 document.querySelectorAll("#someId");
  • Wir haben jetzt die Eigenschaft Element.classList , wenn wir CSS-Klassen manipulieren wollen.

Anstatt zu tun:

 $(selector).addClass(className);

Wir können:

 element.classList.add(className);
  • Viele Animationen können direkt mit CSS erstellt werden, anstatt JavaScript zu implementieren.

Anstatt zu tun:

 $(selector).fadeIn();

Wir können:

 element.classList.add('show'); element.classList.remove('hide');

Und wenden Sie etwas CSS-Styling an:

 .show { transition: opacity 400ms; } .hide { opacity: 0; }
  • Wir haben jetzt die Funktion addEventListener, wenn wir Ereignisse behandeln möchten.

Anstatt zu tun:

 $(selector).on(eventName, eventHandler);

Wir können:

 element.addEventListener(eventName, eventHandler);
  • Anstelle von jQuery Ajax können wir XMLHttpRequest verwenden.

Anstatt zu tun:

 $.ajax({ type: 'POST', url: '/the-url', data: data });

Wir können:

 var request = new XMLHttpRequest(); request.open('POST', '/the-url', true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); request.send(data);

Für weitere Details können Sie sich diese Vanilla JavaScript Code Snippets ansehen.

Komponenten identifizieren

Wenn wir jQuery in unserer Anwendung verwenden, sollten wir einige HTML-Inhalte haben, die auf dem Webserver generiert werden, und JavaScript-Code, der der Seite Interaktivität hinzufügt. Wir fügen wahrscheinlich Ereignishandler beim Laden der Seite hinzu, die das DOM manipulieren, wenn die Ereignisse eintreten, und wahrscheinlich das CSS oder den Stil der Elemente aktualisieren. Wir könnten auch Backend-Dienste aufrufen, um Aktionen auszuführen, die sich auf das DOM der Seite auswirken oder es sogar neu laden können.

Die Idee wäre, den in den Seiten lebenden JavaScript-Code umzugestalten und React-Komponenten zu erstellen. Dies wird uns helfen, verwandten Code zu verbinden und Elemente zu erstellen, die Teil einer größeren Komposition sein werden. Auf diese Weise können wir auch den Status unserer Anwendung besser handhaben. Wenn wir das Frontend unserer Anwendung analysieren, sollten wir es in Teile aufteilen, die einer bestimmten Aufgabe gewidmet sind, damit wir darauf basierende Komponenten erstellen können.

Wenn wir eine Schaltfläche haben:

 <button>Click</button>

Mit folgender Logik:

 var $btnAction = $("#btn-action"); $btnAction.on("click", function() { alert("Button was clicked"); });

Wir können es zu einer React-Komponente migrieren:

 import React from 'react'; function ButtonComponent() { let handleButtonClick = () => { alert('Button clicked!') } return <button onClick={handleButtonClick}>Click</button> }

Aber wir sollten auch auswerten, wie der Migrationsprozess durchgeführt wird, da unsere Anwendung funktioniert und verwendet wird und wir sie nicht beeinflussen wollen (oder zumindest so wenig wie möglich beeinflussen).

Gute Migration

Eine gute Migration ist eine, bei der alle Teile der Anwendung vollständig auf das neue Framework oder die neue Technologie migriert sind. Dies wäre das ideale Szenario für unsere Anwendung, da wir alle Teile synchron halten und ein einheitliches Tool und eine eindeutige Referenzversion verwenden würden.

Eine gute und vollständige Migration beinhaltet normalerweise ein komplettes Neuschreiben des Codes unserer App, und das macht Sinn. Wenn wir eine App von Grund auf neu bauen, haben wir die Möglichkeit zu entscheiden, in welche Richtung wir mit dem neuen Code gehen wollen. Wir könnten einen neuen Blickwinkel auf unsere bestehenden Systeme und Arbeitsabläufe einnehmen und mit dem Wissen, das wir in diesem Moment haben, eine völlig neue App erstellen, die vollständiger ist als die, die wir hatten, als wir unsere Webanwendung zum ersten Mal erstellten.

Aber ein komplettes Neuschreiben bringt einige Probleme mit sich. Zunächst einmal erfordert es viel Zeit. Je größer die Anwendung ist, desto mehr Zeit benötigen wir, um sie neu zu schreiben. Ein weiteres Problem ist der Arbeitsaufwand und die Anzahl der Entwickler, die dafür erforderlich sind. Und wenn wir keine progressive Migration durchführen, müssen wir darüber nachdenken, wie lange unsere Anwendung nicht verfügbar sein wird.

Normalerweise kann bei kleinen Projekten, Projekten, die sich nicht häufig ändern, oder Anwendungen, die für unser Unternehmen nicht so kritisch sind, eine vollständige Neufassung durchgeführt werden.

Schnelle Migration

Ein anderer Ansatz besteht darin, die Anwendung in Teile oder Stücke zu unterteilen. Wir migrieren die App Stück für Stück und veröffentlichen diese Teile, wenn sie fertig sind. Daher haben wir Teile unserer Anwendung migriert, die den Benutzern zur Verfügung stehen und mit unserer bestehenden Produktions-App koexistieren.

Mit dieser schrittweisen Migration stellen wir den Benutzern einzelne Funktionen unseres Projekts schneller zur Verfügung, da wir nicht warten müssen, bis die vollständige Anwendung neu geschrieben wird. Wir erhalten auch schnelleres Feedback von den Benutzern, wodurch wir Fehler oder Probleme früher erkennen können.

Aber eine schrittweise Migration treibt uns dazu, andere Tools, Bibliotheken, Abhängigkeiten und Frameworks zu haben. Oder wir müssen sogar verschiedene Versionen desselben Tools unterstützen. Diese erweiterte Unterstützung könnte zu Konflikten mit unserer Anwendung führen.

Wir könnten sogar Probleme haben, wenn wir Richtlinien im globalen Bereich anwenden, da jeder der migrierten Teile auf unterschiedliche Weise funktionieren könnte, aber von dem Code beeinflusst wird, der globale Parameter für unser System festlegt. Ein Beispiel hierfür ist die Verwendung einer Kaskadenlogik für das CSS-Styling.

Stellen Sie sich vor, wir arbeiten in unserer Webanwendung mit verschiedenen Versionen von jQuery, weil wir Funktionalitäten aus neueren Versionen zu den später erstellten Modulen hinzugefügt haben. Wie kompliziert wäre es, unsere gesamte App auf eine neuere Version von jQuery zu migrieren? Stellen Sie sich nun das gleiche Szenario vor, aber Sie migrieren zu einem völlig anderen Framework wie Next.js. Das kann kompliziert sein.

Frankenstein-Migration

Denys Mishunov schrieb einen Artikel im Smashing Magazine, in dem er eine Alternative zu diesen beiden Migrationsideen vorstellte und versuchte, das Beste aus den beiden vorherigen Ansätzen herauszuholen: Die Frankenstein-Migration. Der Migrationsprozess basiert auf zwei Hauptkomponenten: Microservices und Webkomponenten.

Der Migrationsprozess besteht aus einer Liste von Schritten, die befolgt werden müssen:

1. Identifizieren Sie Microservices

Basierend auf unserem App-Code sollten wir ihn in unabhängige Teile aufteilen, die einem kleinen Job gewidmet sind. Wenn wir über die Verwendung von React oder Next.js nachdenken, könnten wir das Konzept der Microservices mit den verschiedenen Komponenten verknüpfen, die wir haben.

Denken wir als Beispiel an eine Anwendung mit einer Einkaufsliste. Wir haben eine Liste der zu kaufenden Dinge und eine Eingabe, um weitere Dinge zur Liste hinzuzufügen. Wenn wir also unsere App in kleine Teile aufteilen möchten, könnten wir über eine „Elementliste“-Komponente und ein „Element hinzufügen“ nachdenken. Auf diese Weise können wir die Funktionalität und das Markup für jeden dieser Teile in verschiedene React-Komponenten aufteilen.

Um zu bestätigen, dass die Komponenten unabhängig sind, sollten wir in der Lage sein, eine davon aus der App zu entfernen, und die anderen sollten davon nicht betroffen sein. Wenn wir beim Entfernen des Markups und der Funktionalität aus einem Dienst einen Fehler erhalten, identifizieren wir die Komponenten nicht korrekt oder wir müssen die Funktionsweise unseres Codes umgestalten.

2. Host-zu-Alien-Zugriff zulassen

„Host“ ist unsere bestehende Anwendung. „Alien“ ist dasjenige, das wir mit dem neuen Framework erstellen werden. Beide sollten unabhängig voneinander funktionieren, aber wir sollten den Zugriff vom Host zum Alien ermöglichen. Wir sollten in der Lage sein, eine der beiden Anwendungen bereitzustellen, ohne die andere zu unterbrechen, aber die Kommunikation zwischen ihnen aufrechtzuerhalten.

3. Schreiben Sie eine Alien-Komponente

Schreiben Sie einen Dienst von unserer Host-Anwendung in unsere Alien-Anwendung um, indem Sie das neue Framework verwenden. Die Komponente sollte dem gleichen Prinzip der Unabhängigkeit folgen, das wir zuvor erwähnt haben.

Kommen wir zurück zum Beispiel der Einkaufsliste. Wir haben eine „Element hinzufügen“-Komponente identifiziert. Mit jQuery sieht das Markup der Komponente etwa so aus:

 <input class="new-item" />

Und der JavaScript/jQuery-Code zum Hinzufügen der Elemente zur Liste sieht in etwa so aus:

 var ENTER_KEY = 13; $('.new-item').on('keyup', function (e) { var $input = $(e.target); var val = $input.val().trim(); if (e.which !== ENTER_KEY || !val) { return; } // code to add the item to the list $input.val(''); });

Stattdessen können wir eine AddItem React-Komponente erstellen:

 import React from 'react' function AddItemInput({ defaultText }) { let [text, setText] = useState(defaultText) let handleSubmit = e => { e.preventDefault() if (e.which === 13) { setText(e.target.value.trim()) } } return <input type="text" value={text} onChange={(e) => setText(e.target.value)} onKeyDown={handleSubmit} /> }

4. Schreiben Sie einen Webkomponenten-Wrapper um den Alien-Dienst

Erstellen Sie eine Wrapper-Komponente, die unseren gerade erstellten Alien-Dienst importiert und rendert. Die Idee ist, eine Brücke zwischen der Host-App und der Alien-App zu schaffen. Denken Sie daran, dass wir möglicherweise einen Paket-Bundler benötigen, um JavaScript-Code zu generieren, der in unserer aktuellen Anwendung funktioniert, da wir unsere neuen React-Komponenten kopieren und zum Laufen bringen müssen.

Nach dem Beispiel der Einkaufsliste können wir eine AddItem-wrapper.js Datei im Host-Projekt erstellen. Diese Datei enthält den Code, der unsere bereits erstellte AddItem Komponente umschließt und damit ein benutzerdefiniertes Element erstellt:

 import React from "../alien/node_modules/react"; import ReactDOM from "../alien/node_modules/react-dom"; import AddItem from "../alien/src/components/AddItem"; class FrankensteinWrapper extends HTMLElement { connectedCallback() { const appWrapper = document.createElement("div"); appWrapper.classList.add("grocerylistapp"); ... ReactDOM.render( <HeaderApp />, appWrapper ); … } } customElements.define("frankenstein-add-item-wrapper", FrankensteinWrapper);

Wir sollten die erforderlichen Knotenmodule und Komponenten aus den Alien-Anwendungsordnern mitbringen, da wir sie importieren müssen, damit die Komponente funktioniert.

5. Ersetzen Sie den Hostdienst durch die Webkomponente

Diese Wrapper-Komponente wird diejenige in der Host-Anwendung ersetzen, und wir werden damit beginnen, sie zu verwenden. Die Anwendung in der Produktion wird also eine Mischung aus Host-Komponenten und von Alien umschlossenen Komponenten sein.

In unserer Beispiel-Host-Anwendung sollten wir Folgendes ersetzen:

 <input class="new-item" />

Mit

 <frankenstein-add-item-wrapper></frankenstein-add-item-wrapper> ... <script type="module" src="js/AddItem-wrapper.js"></script>

6. Spülen und wiederholen

Führen Sie die Schritte 3, 4 und 5 für jeden der identifizierten Microservices durch.

7. Wechseln Sie zu Alien

Host ist jetzt eine Sammlung von Wrapper-Komponenten, die alle Webkomponenten enthalten, die wir in der Alien-Anwendung erstellt haben. Da wir alle identifizierten Microservices konvertiert haben, können wir sagen, dass die Alien-Anwendung fertig ist und alle Dienste migriert wurden. Wir müssen unsere Benutzer jetzt nur noch auf die Alien-Anwendung hinweisen.

Die Frankenstein-Migrationsmethode funktioniert als Kombination aus dem guten und dem schnellen Ansatz. Wir migrieren die komplette Anwendung, geben aber die verschiedenen Komponenten frei, wenn sie fertig sind. So stehen sie schneller zur Verfügung und können von den Benutzern in der Produktion früher ausgewertet werden.

Wir müssen jedoch bedenken, dass wir mit diesem Ansatz etwas überarbeiten. Wenn wir die von uns erstellten Komponenten für unsere Alien-Anwendung verwenden möchten, müssen wir eine Wrapper-Komponente erstellen, die in die Host-App aufgenommen wird. Dadurch verbringen wir Zeit damit, den Code für diese Wrapper-Elemente zu entwickeln. Indem wir sie in unserer Host-Anwendung verwenden, duplizieren wir außerdem die Einbeziehung von Code und Abhängigkeiten und fügen Code hinzu, der die Leistung unserer Anwendung beeinflusst.

Strangler-Anwendung

Ein weiterer Ansatz, den wir verfolgen können, ist die Legacy Application Strangulation. Wir identifizieren die Grenzen unserer bestehenden Webanwendung, und wenn wir unserer App Funktionalitäten hinzufügen müssen, verwenden wir ein neueres Framework, bis das alte System „stranguliert“ ist. Dieser Ansatz hilft uns, das potenzielle Risiko zu reduzieren, das wir beim Migrieren einer App experimentieren können.

Um diesem Ansatz zu folgen, müssen wir verschiedene Komponenten identifizieren, wie wir es bei der Frankenstein-Migration tun. Sobald wir unsere App in verschiedene Teile von zugehörigem imperativem Code aufgeteilt haben, packen wir sie in neue React-Komponenten. Wir fügen kein zusätzliches Verhalten hinzu, wir erstellen nur React-Komponenten, die unsere vorhandenen Inhalte rendern.

Sehen wir uns zur Verdeutlichung ein Beispiel an. Angenommen, wir haben diesen HTML-Code in unserer Anwendung:

 <div class="accordion"> <div class="accordion-panel"> <h3 class="accordion-header">Item 1</h3> <div class="accordion-body">Text 1</div> </div> <div class="accordion-panel"> <h3 class="accordion-header">Item 2</h3> <div class="accordion-body">Text 2</div> </div> <div class="accordion-panel"> <h3 class="accordion-header">Item 3</h3> <div class="accordion-body">Text 3</div> </div>> </div>

Und dieser JavaScript-Code (jQuery-Funktionen haben wir bereits durch neue JavaScript-Standardfunktionen ersetzt).

 const accordions = document.querySelectorAll(".accordion"); for (const accordion of accordions) { const panels = accordion.querySelectorAll(".accordion-panel"); for (const panel of panels) { const head = panel.querySelector(".accordion-header"); head.addEventListener('click', () => { for (const otherPanel of panels) { if (otherPanel !== panel) { otherPanel.classList.remove('accordion-expanded'); } } panel.classList.toggle('accordion-expanded'); }); } }

Dies ist eine übliche Implementierung einer accordion -Komponente für JavaScript. Da wir hier React einführen wollen, müssen wir unseren bestehenden Code mit einer neuen React-Komponente umschließen:

 function Accordions() { useEffect(() => { const accordions = document.querySelectorAll(".accordion") for (const accordion of accordions) { const panels = accordion.querySelectorAll(".accordion-panel") for (const panel of panels) { const head = panel.querySelector(".accordion-header") head.addEventListener("click", () => { for (const otherPanel of panels) { if (otherPanel !== panel) { otherPanel.classList.remove("accordion-expanded") } } panel.classList.toggle("accordion-expanded") }); } } }, []) return null } ReactDOM.render(<Accordions />, document.createElement("div"))

Die Komponente fügt kein neues Verhalten oder Feature hinzu. Wir verwenden useEffect , weil die Komponente im Dokument gemountet wurde. Aus diesem Grund gibt die Funktion null zurück, da der Hook keine Komponente zurückgeben muss.

Also haben wir unserer bestehenden App keine neuen Funktionen hinzugefügt, aber wir haben React eingeführt, ohne sein Verhalten zu ändern. Von nun an verwenden wir jedes Mal, wenn wir neue Funktionen oder Änderungen an unserem Code hinzufügen, das neuere ausgewählte Framework.

Clientseitiges Rendering, serverseitiges Rendering oder statische Generierung?

Next.js gibt uns die Möglichkeit zu wählen, wie wir jede Seite unserer Webanwendung rendern möchten. Wir können das clientseitige Rendering verwenden, das uns React bereits bietet, um die Inhalte direkt im Browser des Benutzers zu generieren. Oder wir können den Inhalt unserer Seite auf dem Server mithilfe von serverseitigem Rendering rendern. Schließlich können wir den Inhalt unserer Seite zur Erstellungszeit mithilfe der statischen Generierung erstellen.

In unserer Anwendung sollten wir Code beim Laden der Seite laden und rendern, bevor wir mit der Interaktion mit einer JavaScript-Bibliothek oder einem Framework beginnen. Wir verwenden möglicherweise eine serverseitige Rendering-Programmiersprache oder -Technologie wie ASP.NET, PHP oder Node.js. Wir können die Funktionen von Next.js nutzen und unsere aktuelle Rendering-Methode durch die serverseitige Rendering-Methode von Next.js ersetzen. Auf diese Weise behalten wir das gesamte Verhalten innerhalb desselben Projekts, das unter dem Dach unseres ausgewählten Frameworks funktioniert. Außerdem behalten wir die Logik unserer Hauptseite und der React-Komponenten innerhalb desselben Codes bei, der alle erforderlichen Inhalte für unsere Seite generiert.

Denken wir als Beispiel an eine Dashboard-Seite. Wir können das gesamte anfängliche Markup der Seite zur Ladezeit auf dem Server generieren, anstatt es mit React im Webbrowser des Benutzers generieren zu müssen.

 const DashboardPage = ({ user }) => { return ( <div> <h2>{user.name}</h2> // User data </div> ) } export const getServerSideProps = async ({ req, res, params }) => { return { props: { user: getUser(), }, } }, }) export default DashboardPage

Wenn das Markup, das wir beim Laden der Seite rendern, vorhersehbar ist und auf Daten basiert, die wir zur Erstellungszeit abrufen können, wäre die statische Generierung eine gute Wahl. Durch das Generieren statischer Assets zur Build-Zeit wird unsere Anwendung schneller, sicherer, skalierbarer und wartungsfreundlicher. Und falls wir dynamische Inhalte auf den Seiten unserer App generieren müssen, können wir das clientseitige Rendering von React verwenden, um Informationen von Diensten oder Datenquellen abzurufen.

Stellen Sie sich vor, wir haben eine Blog-Site mit vielen Blog-Posts. Wenn wir Static Generation verwenden, können wir eine generische [blog-slug].js Datei in unserer Next.js-Anwendung erstellen und durch Hinzufügen des folgenden Codes alle statischen Seiten für unsere Blog-Posts zur Erstellungszeit generieren.

 export const getStaticPaths = async () => { const blogPosts = await getBlogPosts() const paths = blogPosts.map(({ slug }) => ({ params: { slug, }, })) return { paths, fallback: false, } } export const getStaticProps = async ({ params }) => { const { slug } = params const blogPost = await getBlogPostBySlug(slug) return { props: { data: JSON.parse(JSON.stringify(blogPost)), }, } }

Erstellen Sie eine API mit API-Routen

Eine der großartigen Funktionen von Next.js ist die Möglichkeit, API-Routen zu erstellen. Mit ihnen können wir mit Node.js unsere eigenen serverlosen Funktionen erstellen. Wir können auch NPM-Pakete installieren, um die Funktionalität zu erweitern. Eine coole Sache dabei ist, dass unsere API in demselben Projekt/App wie unser Frontend bleiben wird, sodass wir keine CORS-Probleme haben werden.

Wenn wir eine API unterhalten, die von unserer Webanwendung mithilfe der jQuery AJAX-Funktionalität aufgerufen wird, könnten wir sie mithilfe von API Routes ersetzen. Auf diese Weise behalten wir die gesamte Codebasis unserer App im selben Repository und vereinfachen die Bereitstellung unserer Anwendung. Wenn wir einen Drittanbieterdienst verwenden, können wir API-Routen verwenden, um die externen URLs zu „maskieren“.

Wir könnten eine API-Route /pages/api/get/[id].js haben, die Daten zurückgibt, die wir auf unserer Seite verwenden.

 export default async (req, res) => { const { id } = req.query try { const data = getData(id) res.status(200).json(data) } catch (e) { res.status(500).json({ error: e.message }) } }

Und rufen Sie es aus dem Code unserer Seite auf.

 const res = await fetch(`/api/get/${id}`, { method: 'GET', }) if (res.status === 200) { // Do something } else { console.error(await res.text()) }

Bereitstellen auf Netlify

Netlify ist eine vollständige Plattform, die zum Automatisieren, Verwalten, Erstellen, Testen, Bereitstellen und Hosten von Webanwendungen verwendet werden kann. Es hat viele Funktionen, die die Entwicklung moderner Webanwendungen einfacher und schneller machen. Einige Netlify-Highlights sind:

  • Globale CDN-Hosting-Plattform,
  • Unterstützung serverloser Funktionen,
  • Bereitstellung von Vorschauen basierend auf Github-Pull-Requests,
  • Webhooks,
  • Sofortige Rollbacks,
  • Rollenbasierte Zugriffskontrolle.

Netlify ist eine großartige Plattform zum Verwalten und Hosten unserer Next.js-Anwendungen, und es ist ziemlich einfach, eine Web-App damit bereitzustellen.

Zunächst müssen wir unseren Next.js-App-Code in einem Git-Repository verfolgen. Netlify stellt eine Verbindung zu GitHub (oder der von uns bevorzugten Git-Plattform) her, und immer wenn eine Änderung an einem Zweig vorgenommen wird (ein Commit oder eine Pull-Anfrage), wird eine automatische „Build and Deploy“-Aufgabe ausgelöst.

Sobald wir ein Git-Repository mit dem Code unserer App haben, müssen wir dafür eine „Netlify-Site“ erstellen. Dazu haben wir zwei Möglichkeiten:

  1. Verwenden der Netlify-CLI
    Nachdem wir die CLI installiert haben ( npm install -g netlify-cli ) und uns bei unserem Netlify-Konto angemeldet haben ( ntl login ), können wir in das Stammverzeichnis unserer Anwendung gehen, ntl init und den Schritten folgen.
  2. Verwenden der Netlify-Web-App
    Wir sollten zu https://app.netlify.com/start gehen. Stellen Sie eine Verbindung zu unserem Git-Anbieter her, wählen Sie das Repository unserer Anwendung aus der Liste aus, konfigurieren Sie einige Build-Optionen und stellen Sie es bereit.

Bei beiden Methoden müssen wir berücksichtigen, dass unser Build-Befehl next build sein wird und unser bereitzustellendes Verzeichnis out ist.

Schließlich wird das Plug-in Essential Next.js automatisch installiert, mit dem wir API-Routen, dynamische Routen und den Vorschaumodus bereitstellen und verwenden können. Und das war's, wir haben unsere Next.js-Anwendung in einem schnellen und stabilen CDN-Hosting-Service eingerichtet und ausgeführt.

Fazit

In diesem Artikel haben wir Websites mit der jQuery-Bibliothek bewertet und sie mit neuen Frontend-Frameworks wie React und Next.js verglichen. Wir haben definiert, wie wir eine Migration auf ein neueres Tool starten können, falls es uns nützt. Wir haben verschiedene Migrationsstrategien evaluiert und einige Beispiele für Szenarien gesehen, die wir zu Next.js-Webanwendungsprojekten migrieren könnten. Schließlich haben wir gesehen, wie wir unsere Next.js-Anwendung auf Netlify bereitstellen und zum Laufen bringen.

Weiterführende Literatur und Ressourcen

  • Frankenstein-Migration: Framework-agnostischer Ansatz
  • Entfernen von jQuery vom GitHub.com-Frontend
  • Erste Schritte mit Next.js
  • So stellen Sie Next.js-Sites auf Netlify bereit
  • Next.js-Artikel im Netlify-Blog