Next.js 9.1.7

Next.js 9 wurde vor sechs (6) Monaten veröffentlicht, gefolgt von Next.js 9.1 vor drei (3) Monaten.

Diese beiden Versionen haben Next.js sehr leistungsfähige neue Funktionen hinzugefügt, ohne die Größe unserer clientseitigen Laufzeitumgebung zu erhöhen.

Seitdem haben wir uns stark darauf konzentriert, das Framework insgesamt zu verfeinern und zu verbessern: 9.1.1, 9.1.2, 9.1.3, 9.1.4, 9.1.5, 9.1.6 und 9.1.7.

Werfen wir einen Blick darauf, was diese Versionen verbessert haben!

• 3% - 8%+ kleinere clientseitige JavaScript-Größe: Wir haben die Anwendungsausgabe weiter optimiert und bei "Hello World"-Anwendungen 7,5 kB eingespart. Komplexere Anwendungen zeigen eine Einsparung von bis zu 8 % oder mehr.
• Überarbeitete CLI-Ausgabe für Produktions-Builds: Die Ausgabe des Produktions-Builds zeigt jetzt die gzippten Dateigrößen in einem besser verständlichen Format an.
• Neue integrierte Polyfills: fetch(), URL und Object.assign: Anwendungen können die fetch()-API, URL und Object.assign in Legacy-Browsern ohne Kompatibilitätsprobleme nutzen.
• Optimiertes Seitenladen: Bessere FCP und TTI: Wir haben eng mit dem Google Chrome-Team zusammengearbeitet, um die Seitenladeleistung zu maximieren. Dies führt zu einer viel besseren Nutzererfahrung.
• Unterstützung für die neuesten JavaScript-Funktionen: Wir sind bestrebt, sicherzustellen, dass Sie immer die neuesten JavaScript-Funktionen nutzen können, einschließlich Optional Chaining, Nullish Coalescing und anderen stabilen ES2020-Funktionen.
• Zero-Config-Deployment-Unterstützung für next export-Anwendungen: Anwendungen mit next export können jetzt ohne Konfiguration auf Vercel bereitgestellt werden.
• React Strict Mode-Kompatibilität und Opt-In: Die gesamte clientseitige Laufzeitumgebung von Next.js ist jetzt mit Reacts Strict Mode kompatibel. Wir haben auch eine Konfigurationsoption hinzugefügt, um diesen Modus für Ihre gesamte Anwendung zu aktivieren.
• Automatisierte Tests gegen Nightly-React-Builds: Next.js wird automatisch gegen React's next channel getestet, um die Kompatibilität mit zukünftigen Versionen sicherzustellen.

Alle diese Vorteile sind nicht-breaking und vollständig abwärtskompatibel. Um zu aktualisieren, müssen Sie nur Folgendes ausführen:

npm i next@latest react@latest react-dom@latest

3% - 8%+ kleinere clientseitige JavaScript-Größe

In Zusammenarbeit mit dem Google Chrome-Team profitieren alle Next.js-Anwendungen von einer Reduzierung um 7,5 kB oder mehr.

Einfache Anwendungen sollten eine Reduzierung der Anwendungsgröße um 3-4 % feststellen, während fortgeschrittenere Anwendungen eine Reduzierung von 6-8 % (oder mehr) sehen können!

Diese Einsparungen sind teilweise darauf zurückzuführen, dass die clientseitige Version des url-Pakets durch eine auf der URL-API basierende Version ersetzt wurde.

Weitere Größenreduzierungen wurden durch die Bereitstellung integrierter, kleiner Polyfills für häufig verwendete Pakete erreicht. Sie können hier mehr über diese Polyfills lesen.

Schließlich haben wir unsere JSX-Ausgabe optimiert, was zu Einsparungen in direkter Korrelation zur Menge an JSX in Ihrer Anwendung führt.

Überarbeitete CLI-Ausgabe für Produktions-Builds

Die CLI-Ausgabe für Produktions-Builds wurde zur besseren Übersichtlichkeit überarbeitet. Da Next.js ein Hybrid-Anwendungsframework ist, kann jede Seite unterschiedliche Eigenschaften haben.

Die neue Ausgabe klassifiziert jede Seite wie folgt:

• Serverseitig gerendert (Server): Die Seite wird zur Laufzeit serverseitig gerendert, d.h. sie verwendet getInitialProps oder getServerProps (Vorschlag)
• Automatisch statisch optimiert (Statisch): Die Seite wurde zum Build-Zeitpunkt als statisches HTML gerendert und wird als statische Datei bereitgestellt (verwendet keine initialen Props)
• Statisch generiert mit berechneten Daten (SSG): Die Seite wurde zum Build-Zeitpunkt als statisches HTML/JSON generiert und wird als statische Dateien bereitgestellt (verwendet getStaticProps (Vorschlag))

Darüber hinaus zeigt die neue Ausgabe die gzippte Größe jeder Seite an – diese Größen schließen Dateien aus, die von allen Seiten gemeinsam genutzt werden (separat angezeigt).

Die Größe jeder Seite wird entsprechend der wahrgenommenen Nutzererfahrung eingefärbt:

• Weniger als 130 kB: Grün – Ihre Anwendung sollte unter den meisten Netzwerk- und Gerätebedingungen performant sein.
• Zwischen 130 kB und 170 kB: Gelb – Ihre Anwendung nähert sich einer Ladezeit von 5-6 Sekunden unter globalen Baseline-Geräte- und Netzwerkbedingungen.
• Mehr als 170 kB: Rot – Ihre Anwendung wird wahrscheinlich mehr als 6 Sekunden unter denselben Bedingungen laden.

Die neue Next.js-Produktions-CLI-Ausgabe

Wir würden uns über Ihr Feedback zur neuen Build-Ausgabe freuen.

In naher Zukunft wird Next.js auch Größenbudgets haben, die Ihnen helfen, sicherzustellen, dass Seiten innerhalb einer bestimmten Größenklasse liegen.

Neue integrierte Polyfills: fetch(), URL und Object.assign

Bei der Untersuchung vieler Benutzeranwendungen und unserer Beispiele haben wir festgestellt, dass die meisten mit einem ähnlichen Satz von Polyfills ausgeliefert wurden. In einigen Fällen hatten Anwendungen sogar doppelte Polyfills für dieselbe Funktion.

Um dies zu beheben, haben wir mit dem Google Chrome-Team zusammengearbeitet, um Polyfills für die drei am häufigsten beobachteten APIs einzubauen.

Durch differenzielles Laden werden diese Polyfills für 83 % des globalen Webverkehrs nicht geladen. Das bedeutet, dass die Mehrheit Ihrer Benutzer die mit diesen Polyfills verbundenen Bytes nicht herunterlädt – sie werden nur bei Bedarf heruntergeladen.

Darüber hinaus werden alle bekannten Polyfills, die wir jetzt eingebaut haben, vollständig aus Ihrem Produktions-Build entfernt. Das bedeutet, dass Sie nicht für eine Ihrer Abhängigkeiten bezahlen müssen, die versehentlich ein Polyfill für eine dieser APIs importiert.

Die Liste der integrierten APIs und die Polyfills, die sie überflüssig machen, sind wie folgt:

• fetch() – Ersetzt: whatwg-fetch und unfetch.
• URL – Ersetzt: das url-Paket (Node.js-API).
• Object.assign() – Ersetzt: object-assign, object.assign und core-js/object/assign.

Sie müssen immer noch isomorphic-fetch oder isomorphic-unfetch importieren, wenn Sie fetch() auf dem Server verwenden.

Diese Änderung ist vollständig nicht-breaking, und alle Polyfills werden mit den spezifikationskonformsten verfügbaren Versionen erstellt. Das Ergebnis ist eine Reduzierung von bis zu 18 kB JavaScript, die in modernen Browsern aus Ihren Produktions-Bundles entfernt werden.

Optimiertes Seitenladen: Bessere FCP und TTI

Next.js hat seine Preloading-Implementierung optimiert, um FCP und die gesamte TTI zu reduzieren.

Durch die Umgehung eines Browser-Bugs wird CSS (falls verwendet) jetzt korrekt gegenüber JavaScript priorisiert. Dies führt zu einem schnelleren First Contentful Paint, was zu einer viel schneller visuell vollständigen Website für Ihre Endbenutzer führt.

Darüber hinaus haben wir unser Seiten-Prefetching optimiert, um Netzwerkanforderungen mit niedrigerer Priorität zu verwenden.

Darüber hinaus erfolgen diese Anforderungen nur während der Browser-Leerlaufzeit, was zu einer schnelleren Time-to-Interactive führt. Dies liegt daran, dass der Browser die Interaktivität Ihrer Anwendung gegenüber optimistischem Prefetching priorisiert.

FCP/TTI vor und nach den Optimierungen

Unterstützung für die neuesten JavaScript-Funktionen

Next.js verfügt über eine fortschrittliche, hochoptimierte Kompilierungspipeline, die es Ihnen ermöglicht, die neuesten JavaScript-Funktionen zu nutzen. Die kürzlich eingeführten Optimierungen haben direkt zur 3-8%igen Reduzierung der Anwendungsgröße beigetragen.

Diese JavaScript-Funktionen können genutzt werden, ohne sich um Browser-Kompatibilität sorgen zu müssen, da wir Ihren Code automatisch kompilieren, um alle Browser (mit Ausnahme von End-of-Life-Versionen) zu unterstützen. Dazu gehören ES6+-Funktionen wie async/await (ES2017), Object Rest/Spread Properties (ES2018), Dynamic import() (ES2020) und mehr!

In dieser Version freuen wir uns, die Unterstützung für Optional Chaining (Stage 4) und Nullish Coalescing (Stage 4) bekannt zu geben.

function Page(props) {
  return (
    <p>{props?.deeply?.nested?.value}</p>
    /* ⬆ Wenn deeply.nested.value nicht verfügbar ist, wird es nicht gerendert */
  );
}
 
export default Page;

Optionaler Verkettungsoperator (?.)

function Page(props) {
  return (
    <p>{props.something ?? 'Standardwert'}</p>
    /* ⬆ ergibt "Standardwert" */
  );
}
 
export default Page;

Nullish Coalescing Operator (??)

In Zukunft planen wir, noch optimiertere Bundles durch automatische module / nomodule Builds auszugeben.

Zero-Config-Deployment-Unterstützung für next export-Anwendungen

Der Next.js-Befehl next export funktioniert jetzt out-of-the-box mit Vercels Zero Configuration. Vor dieser Änderung mussten Benutzer, die next export nutzten, eine benutzerdefinierte now.json erstellen.

Die Nutzung des Next.js-Export-Modus auf Vercel ist so einfach wie das Vorhandensein des folgenden build-Skripts in package.json:

{
  "scripts": {
    "build": "next build && next export"
  }
}

Dann können Sie Ihre Next.js-Anwendung mit nur einem einzigen Befehl auf Vercel bereitstellen. Wenn Sie Vercel noch nicht installiert haben, können Sie dies tun, indem Sie Vercel CLI installieren.

now

React Strict Mode-Kompatibilität und Opt-In

Die komplette Next.js-Laufzeitumgebung ist jetzt Strict Mode-kompatibel. Dies umfasst Aktualisierungen des Next.js-Head-Managers (<Head>), next/dynamic und anderer Kernfunktionen. Das bedeutet, dass die Laufzeiten jetzt Hooks verwenden oder veraltete Lifecycles eliminiert haben und die neue Context-API von React nutzen.

Wir haben auch eine bequeme Opt-In-Option hinzugefügt, um den Strict Mode für Ihre Anwendung zu aktivieren.

Konfigurieren Sie dazu die folgende Option in Ihrer next.config.js:

module.exports = {
  reactStrictMode: true,
};

Wenn Sie oder Ihr Team noch nicht bereit sind, den Strict Mode in Ihrer gesamten Anwendung zu verwenden, ist das in Ordnung! Sie können schrittweise auf einer Seite-für-Seite-Basis migrieren, indem Sie <React.StrictMode> verwenden.

Obwohl nicht erforderlich, wird der Strict Mode in Zukunft viele Optimierungen freischalten. Daher empfehlen wir Ihnen, sich früher als später damit zu befassen!

Automatisierte Tests gegen Nightly-React-Builds

In enger Zusammenarbeit mit dem React Core Team testen wir Next.js jetzt alle 12 Stunden gegen Reacts next channel.

Diese Tests helfen sicherzustellen, dass wir auf zukünftige React-Versionen vorbereitet und kompatibel sind. Die Kompatibilität ist etwas, das Next.js sehr ernst nimmt, und wir sind der langfristigen API-Stabilität von Next.js verpflichtet.

Dieser Prozess wurde dokumentiert vom React Core Team in der Hoffnung, dass andere Projekte im React-Ökosystem diesem Beispiel folgen.

Community

Wir freuen uns auf die bevorstehenden Änderungen, die die Größe und Leistung aller Next.js-Anwendungen verbessern werden.

Darüber hinaus wächst die Next.js-Community weiter:

• Wir hatten über 865 unabhängige Mitwirkende.
• Auf GitHub wurde das Projekt über 43.700 Mal mit einem Stern versehen.
• Das Beispielverzeichnis enthält über 220 Beispiele.

Die Next.js-Community hat jetzt über 13.600 Mitglieder. Machen Sie mit!

Wir sind unserer Community und all den externen Feedbacks und Beiträgen dankbar, die dazu beigetragen haben, diese Version zu gestalten.