Gerade als wir dachten, dass Next.js alles unter der Sonne bietet, damit Ihre App schön aussieht und sich auch so anfühlt, fügten die Entwickler des Frameworks noch mehr Funktionen hinzu, um sicherzustellen, dass Sie ein besseres Erlebnis haben.
Wir werden alle neuen Funktionen besprechen, die in Next.js 13, der neuesten Version von Next.js, eingeführt wurden, von der verbesserten Unterstützung für serverlose Apps bis hin zu neuen Paketen sowie anderen Verbesserungen in allen Aspekten der Verwendung von Next.js.
Next.js ist ein Open-Source-Framework für die Erstellung von Single-Page-Apps (SPA) der nächsten Generation. Es ermöglicht Ihnen, SPAs schneller und mit weniger Code zu erstellen, indem Sie die Best Practices aus dem React-Ökosystem verwenden. Es bietet Ihnen die besten modernen Entwicklungspraktiken und hilft Ihnen gleichzeitig, die Lernkurve zu verkürzen.
Es basiert auf der Webpack Asset Pipeline und React. Sie können Ihre App ganz einfach im Modus serverseitiges Rendern (SSR) oder clientseitiges Rendern (CSR) schreiben und auf mehreren Plattformen bereitstellen, einschließlich Web, Android und iOS.
Die Beliebtheit von Next.js, einem der beliebtesten Web-App-Frameworks, beruht auf seiner Benutzerfreundlichkeit und seiner Erfahrung als Entwickler. Es bietet jedoch auch Funktionen, die es für Medien-, SaaS- und Einzelhandelsunternehmen besonders attraktiv machen. Die Originalversion von Next.js war ein React-Framework für dynamische Server innerhalb von Websites.
Next.js wurde für Teams entwickelt, die ehrgeizige, komplizierte Anwendungen anstelle von einseitigen Anwendungen erstellen möchten. Dynamisch zu sein war jedoch schon immer mit zahlreichen Einschränkungen verbunden. Um dynamisch zu sein, mussten zwei verschiedene Sätze von Laufzeit-APIs unter einen Hut gebracht werden: herkömmliche Web-APIs im Browser und kein Javascript auf dem Server. Es erfordert auch Investitionen in eine teure Infrastruktur, die ständig läuft und arbeitsintensive Prozesse erfordert.
Das Upgrade einer statischen Anwendung war die einzige Methode, um eine dynamische globale Anwendung zu skalieren, es sei denn, Sie waren einer der Webgiganten wie Google oder Facebook. Wenn dynamische Anforderungen vorliegen, werden die Nachteile der Statik deutlich. Sie sind auf enorme Mengen an clientseitigem JavaScript angewiesen, da Ihre zwischengespeicherte oder statisch erzeugte Seite mit einer feinkörnigen Benutzeranpassung nicht kompatibel ist. Der Versuch, innerhalb dieser Einschränkungen das Maximum herauszuholen, war nie die Lösung. Und deshalb wird Next.js 13 eingeführt.
Next.js 13 ist die neueste Version von Next.js. Die eingeführten neuen Funktionen sind umfangreich, und einige von ihnen wurden von der Community schon lange nachgefragt. Es ermöglicht Ihnen endlich, ohne Grenzen dynamisch zu sein.
Next.js 13 umfasst drei wichtige Innovationsbereiche:
Schauen wir uns diese Upgrades genauer an.
Es ist ein Neuanfang für das gesamte Web-Ökosystem, für Next.js und für die Compiler-Infrastruktur. Da keine Einstellung erforderlich ist, bietet Next.js Ihrer App die idealen Standardeinstellungen. Das Schreiben von JavaScript-Tools in JavaScript im Jahr 2016 war nur natürlich.
Der Begriff „Tools“ bezieht sich hier auf Babel, Terser und Webpack. Für diese Tools war es schwierig, Schritt zu halten, da Frontend-Anwendungen an Größe und Komplexität zunahmen. Mit der Leistung der JavaScript-basierten Kompilierung stießen sie an ihre Grenzen. Infolgedessen begann Next.js mit der Umstellung auf native, von Rust betriebene Tools.
Dann trat der Webpack-Ersteller Tobias Koppers dem Vercel-Team bei und gemeinsam erstellten sie Turbopack. Turbopack aktualisiert riesige Anwendungen 700-mal schneller als Webpack und zehnmal schneller als Vite. Die Lücke ist bei sehr großen Anwendungen mit 20-mal schnelleren Updates als bei Vite deutlich ausgeprägter.
Diese Geschwindigkeitsverbesserungen gelten für das Starten Ihres lokalen Entwicklungsservers und für Codeänderungen. Die Leistung von Turbopack beruht auf seiner Low-Level-Inkremental-Engine, die mit Rust hergestellt wurde, und einem gut optimierten Maschinencode. Turbopack erledigt immer nur eine einzige Aufgabe gleichzeitig. Beginnend mit React Fast Refresh konzentriert sich Turbopack auf Ihre lokale Entwicklungserfahrung.
In Zukunft wird Turbopack auch zur Stromversorgung lokaler und cloudbasierter Next.js Produktions-Builds verwendet. Darüber hinaus können Sie mit Teams aus Ihrem gesamten Unternehmen zusammenarbeiten, um bereits abgeschlossene Arbeiten gemeinsam zu nutzen, und zwar nicht nur auf Ihrem lokalen Computer.
Sie können das Turbopack Alpha ausprobieren, indem Sie auf Next.js 13 aktualisieren und ausführen nächster Entwickler — Turbo.
Die unterstützten Benchmarks und Funktionen finden Sie unter turbo.build.
Turbopack ist also der neue Eckpfeiler für leistungsstarke Bare-Metal-Tools und ist jetzt Open Source. Es ist für die Codebasen React und Next.js optimiert.
Selbst bei riesigen Codebasen kann die Erstellung für die Produktion in weniger als zehn Sekunden abgeschlossen sein. Dank des Vercel-Remote-Cache und der Build-Infrastruktur für ourNext.js kommen Ihnen und dem Rest Ihres Teams diese schnellen Updates zugute, da Doppelarbeit vermieden wird. Die Erstellungszeit dieses Remote-Caches hat Entwicklungsteams in Unternehmen aller Größen bereits jahrzehntelang gespart.
Next.js 13 überdenkt, wie Seiten organisiert, visualisiert und am Rand bereitgestellt werden, um das Web weiterzuentwickeln. Der auf dem Dateisystem basierende Router ist eine der beliebtesten Funktionen von Next.js. Sie können in Ihrer Anwendung automatisch Routen ohne Konfiguration erstellen, indem Sie eine Datei in einem Ordner ablegen.
Der Router hat dazu beigetragen, einige der größten Webanwendungen der Welt anzuzeigen. Dies hat es den Entwicklern von usNext.js ermöglicht, erstaunliche Möglichkeiten zu finden, um weiterhin den besten verfügbaren Router bereitzustellen. Um das globale Abrufen von Daten in Ihrer Anwendung zu ermöglichen, können sie es einfacher machen, den Datenabruf innerhalb von Komponenten zusammenzuführen. Beispielsweise kann es einfacher sein, Ihren Anwendungscode mit Ihren Routen wie Komponenten, Tests und Stilen zu verknüpfen, wenn Sie dynamische Datenanforderungen über mehrere Seiten hinweg gemeinsam nutzen. Danach ist das Erstellen Ihrer Konventionen und Ihres Setups für Sie und Ihr Team nicht mehr erforderlich.
Komplexe Benutzeroberflächen, die den Status der Navigationen beibehalten und kostspieliges Neuzeichnen, Rendern und erneutes Auslösen von Animationen vermeiden, können einfacher gestaltet werden. Zur schrittweisen Einführung führt der neue Router zunächst das App-Verzeichnis ein, das neben dem Verzeichnis der aktuellen Seite existieren kann.
Das Team von Next.js arbeitete mit dem React-Kernteam zusammen, um einen neuen Ansatz für das Abrufen zu entwickeln, von dem alle Versionen von React und Next.js profitieren werden. Der Next.js -Datenabruf wird um neue Funktionen erweitert, darunter integriertes Caching, Request-Deduplizierung, programmierbare Revalidierungen und granulare Datenbereinigung, um die Anpassungsfähigkeit und Skalierbarkeit zu erhalten.
Daher ist jetzt eine Hybridlösung verfügbar, die die Vorteile von ISR, statischem Datenabruf, dienstseitigem Datenabruf und sogar SWR kombiniert. Alles an diesem Produkt steht jetzt an erster Stelle, da der Router mithilfe von React-Serverkomponenten aufgebaut ist. Umfangreiche interaktive Benutzererlebnisse auf Kundenseite können weiterhin beibehalten werden, obwohl standardmäßig drastisch weniger JavaScript ausgeliefert wird.
Die neuen React-Primitive ermöglichen die Handhabung von Ladevorgängen, Fehlerzuständen, das Streamen der Benutzeroberfläche beim Rendern und möglicherweise sogar das Ändern von Daten in der Zukunft. Jahrelange Investitionen in das React-Ökosystem haben die Entwicklung dieser neuen API ermöglicht.
Sie können diese Funktionen implementieren, indem Sie das App-Verzeichnis in Ihre neue oder aktuelle Codebasis aufnehmen. Sie können diese Änderung schrittweise vornehmen, sogar seitenweise. Das Seitenverzeichnis wird dagegen weiterhin vollständig gewartet und gepflegt, und mit Hilfe von Turbopack kann die Entwicklung sowohl der Seiten als auch der App-Verzeichnisse beschleunigt werden.
Es kann kompliziert sein, eine Website schnell zu laden. Das Abrufen von Inhalten von Drittanbietern wie Schriftarten, Bildern und Skripten ist genauso wichtig wie das Rendern Ihrer Komponenten. Sie müssen Dinge korrigieren, um abrupte Layoutänderungen, Verzögerungen bei der Eingabe und Verzögerungen bei unklaren Inhalten zu verhindern.
Aus diesem Grund baut Next.js eine fortschrittlichere Compiler- und Rendering-Infrastruktur auf. Darüber hinaus bieten sie Ihnen Lösungen für diese häufigen und komplexeren Probleme:
Im Durchschnitt machen Bilder 44% des Gewichts einer Seite aus. Die Qualität der Bilder ist von entscheidender Bedeutung. 70% der Teilnehmer der Next.js Community gaben an, dass sich bei der Verwendung einer Next.js -Bildkomponente in der Produktion die grundlegenden Webmetriken verbessert haben.
Vercel kann Bilder bei Bedarf für noch höhere Geschwindigkeiten optimieren, da es diese Bildkomponente mit seiner globalen Edge-Infrastruktur ergänzt. Dank dieser Zusammenarbeit zwischen dem Framework und der Cloud-Infrastruktur wurden nun Milliarden optimierter Bilder ohne Entwickleraufwand im Internet verbreitet.
Die Effizienz und das Entwicklererlebnis der Image-Komponenten wurden in Next.js 13 erheblich verbessert. Die Komponentenabstraktion von React ist wertvoll, da sie Komplexität eindämmen kann und gleichzeitig eine einfache, HTML-ähnliche Benutzererfahrung bietet. Next.js 13 bringt eine bessere Bildkomponente auf den Markt, die weniger clientseitige JavaScripts verwendet, besser läuft und dank der Verbesserungen der Webplattform, die in allen gängigen Browsern verfügbar sind, wie z. B. verzögertes Laden von nativen Bildern und CSS-Seitenverhältnissen, ihre vertraute Oberfläche beibehält.
In Next.js 12 Bild lebt als beides @next /bild und @next /zukunft/bild. Next.js 13 wechselt die Standardkomponente zu:
weiter/Bild bewegt sich zu weiter/Vermächtnis/Bild;weiter/Zukunft/Bild bewegt sich zu weiter/Bild.
Der Code in Ihrer App wird mithilfe eines Codemods automatisch migriert. Next.js kann auf diese Weise problemlos aktualisiert werden:
Es ist wahrscheinlich üblich, dass Ersatzschriften zu Layoutänderungen oder sogar zu erheblichen Verzögerungen führen, bevor die richtige Schrift auf dem Bildschirm angezeigt wird. Next.js 13 zeigt, dass Sie die Schriftarten Ihrer Marke problemlos ändern und gleichzeitig eine schnelle Website aufrechterhalten können.
Mit einem brandneuen Schriftsystem, das in Zusammenarbeit mit dem Chrome-Team entwickelt wurde, erfinden sie die Art und Weise, wie Entwickler Schriftarten verwenden, neu. Dieses integrierte Modul optimiert Ihre Schriften, indem es die Verbindungsaufbauzeiten zu externen Hosts reduziert und die Notwendigkeit externer Netzwerkanfragen reduziert, wodurch Datenschutz und Effizienz verbessert werden. Das bedeutet, dass Next.js automatisch eine Schrift für Sie anbieten kann, die Ihnen eine einzigartige Markenidentität in Ihrer gesamten Domain verleiht, unabhängig davon, ob Sie sie aus einer Registrierung wie Google Fonts oder Ihren eigenen benutzerdefinierten Schriftdateien importieren.
Indem wir uns auf das von der Webplattform bereitgestellte CSS-Attribut zur Größenanpassung verlassen, haben wir auch Layoutverschiebungen vermieden. Das neue Schriftmodul kann automatisch 100% der visuellen Störungen durch fehlende Schriften und 99% der Layoutänderungen durch benutzerdefinierte Schriftarten verhindern.
Mit dem neuen @next /font Modul, Sie können Ihre Web Fonts während der Build-Zeit optimieren. Es lädt Font-Assets herunter und hostet sie in Ihrem /öffentlich Mappe. Ihre Schrift wird auf dem schnellstmöglichen Weg ohne Umweg auf einen anderen Server geliefert und zusammen mit den restlichen Ressourcen ordnungsgemäß zwischengespeichert, wodurch Sie Ressourcen sparen.
Wenn Sie Ihren Entwicklungs-Build zum ersten Mal ausführen, stellen Sie sicher, dass Sie über eine Internetverbindung verfügen, damit er korrekt zwischengespeichert werden kann. Es sei denn Fontfallback anpassen gesetzt ist, werden Systemschriften verwendet.
Ein spezielles Modul für Google Web Fonts ist auch verfügbar in @next /font:
Wenn Sie benutzerdefinierte Schriftarten verwenden, funktioniert das Modul auch:
Sie werden auch als Open-Graph-Bilder bezeichnet, was die Klickrate Ihrer Inhalte erheblich erhöhen kann. Statische Social Cards erfordern viel Aufwand, sind schwierig zu verwalten und anfällig für Fehler. Infolgedessen fehlen Sozialkarten häufig. Es ist an der Zeit, wieder dynamisch zu werden. Dynamische Social Cards, die sofort angepasst und berechnet werden müssen, waren bisher schwierig und teuer zu erstellen.
Daher wurde Vercel OG Image Generation, eine neue Methode zur sofortigen Erstellung dynamischer Social Cards, von Next.js angekündigt. Die Funktionen von Vercel Edge, Web Assembly, eine brandneue Kernbibliothek zur Umwandlung von HTML und CSS in Bilder sowie die Abstraktion von React-Komponenten machen diese Methode fünfmal schneller als frühere Alternativen. Keine teuren Geräte oder kopflosen Webbrowser mehr.
Wieder einmal werden bemerkenswerte Weberlebnisse durch die Verschmelzung grundlegender Komponenten mit der globalen Edge-Infrastruktur ermöglicht. Dies vereinfacht die Dinge, spart viel Rechenzeit und spart Entwicklern und Designern mehr Zeit.
Next.js ist ein Framework, das es schon eine Weile gibt und das eine große Nutzerbasis aufgebaut hat. Mit dieser Version haben die Entwickler von Next.js eine neue Ära der Webentwicklung mit vielen neuen Funktionen und Verbesserungen der bestehenden Funktionen eingeleitet.
Wichtige Updates in Next.js 13:
Dafür sollten Sie Ihre Next.js aktualisieren und diese Vorteile nutzen. Wenn Sie Ihre digitalen Produkte mit der neuesten Version von Next.js und mit einem erfahrenen und innovativen Unternehmen aktualisieren möchten, kontaktiere uns. Wir arbeiten seit mehr als 12 Jahren an React.js, und einige der besten europäischen Entwickler arbeiten daran.
Inhaltsautor mit großer Neugier auf die Auswirkungen der Technologie auf die Gesellschaft. Immer umgeben von Büchern und Musik.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
