Next.js 11.1

Wir verbessern die Build-Performance im gesamten Stack mit Next.js 11.1, das folgende Features bietet:

• Sicherheits-Update: Ein wichtiges Update zur Vermeidung potenzieller Open Redirects.
• ES Modules Unterstützung: Jetzt mit einem experimentellen Flag aktivierbar.
• Rust-basierte Tools: SWC-Integration als Ersatz für JS-Tools (Babel und Terser).
• Schnelleres Data Fetching: 2x schnelleres Data Fetching mit HTTP keep-alive beim Pre-Rendering.
• Schnellere Source Maps: 70% schnellere Builds und 67% weniger Speicherverbrauch bei Nutzung von Source Maps.
• ESLint-Integration Verbesserungen: Zugänglichere Defaults und Linting für Tippfehler.
• next/image Verbesserungen: Optionale Sharp-Nutzung, bessere Unterstützung für next export.

Aktualisieren Sie heute durch Ausführen von npm i next@latest.

Sicherheits-Update

Das Next.js-Team arbeitet mit Sicherheitsforschern und Auditoren zusammen, um Sicherheitslücken zu verhindern. Wir danken Gabriel Benmergui von Robinhood für die Untersuchung und Entdeckung eines Open Redirects mit pages/_error.js und der anschließenden verantwortungsvollen Offenlegung.

Das gemeldete Problem schadete Nutzern nicht direkt, konnte aber Phishing-Angriffe ermöglichen, indem es von einer vertrauenswürdigen Domain auf eine Angreifer-Domain weiterleitete. Wir haben in Next.js 11.1 ein Patch eingebracht, das diesen Open Redirect verhindert, sowie Sicherheits-Regressionstests.

Für weitere Details lesen Sie bitte das öffentliche CVE. Wir empfehlen ein Upgrade auf die neueste Next.js-Version, um die allgemeine Sicherheit Ihrer Anwendung zu verbessern. Für zukünftige verantwortungsvolle Offenlegung von Berichten kontaktieren Sie uns unter [email protected].

Hinweis: Next.js-Anwendungen, die auf Vercel gehostet werden, sind nicht betroffen von dieser Sicherheitslücke (daher ist keine Aktion erforderlich für Ihre Next.js-Apps auf Vercel).

ES Modules Unterstützung

Wir arbeiten an umfassender ES Modules-Unterstützung in Next.js, sowohl als Eingabemodule als auch als Ausgabeziel. Ab Next.js 11.1 können Sie nun npm-Pakete mit ES Modules (z.B. "type": "module" in deren package.json) mit einem experimentellen Flag importieren.

module.exports = {
  // Bevorzugung des Ladens von ES Modules gegenüber CommonJS
  experimental: { esmExternals: true },
};

Die ES Modules Unterstützung beinhaltet Abwärtskompatibilität, um das bisherige Import-Verhalten von CommonJS zu unterstützen. In Next.js 12 wird esmExternals: true der Standard sein. Wir empfehlen, die neue Option auszuprobieren und Feedback in GitHub Discussions zu hinterlassen, falls Sie Verbesserungsvorschläge haben.

Einführung von Rust-basiertem SWC

Wir arbeiten an der Integration von SWC, einem superschnellen JavaScript- und TypeScript-Compiler in Rust, der zwei Toolchains in Next.js ersetzen wird: Babel für einzelne Dateien und Terser für die Minifizierung von Output-Bundles.

Als Teil des Ersatzes von Babel durch SWC portieren wir alle benutzerdefinierten Code-Transformationen, die Next.js verwendet, zu SWC-Transformationen in Rust, um die Performance zu maximieren. Zum Beispiel Tree Shaking von ungenutztem Code innerhalb von getStaticProps, getStaticPaths und getServerSideProps.

Als Teil des Ersatzes von Terser arbeiten wir daran, sicherzustellen, dass der SWC-Minifizierer eine ähnliche Ausgabe wie Terser liefert, während die Performance und Parallelisierung der Minifizierung massiv verbessert wird.

In frühen Tests sanken die bisherigen Code-Transformationen mit Babel von ~500ms auf ~10ms und die Code-Minifizierung mit Terser von ~250ms auf ~30ms bei Verwendung von SWC. Insgesamt führte dies zu doppelt so schnellen Builds.

Wir freuen uns bekanntzugeben, dass DongYoon Kang, der Schöpfer von SWC, und Maia Teegarden, Mitwirkende bei Parcel, dem Next.js-Team bei Vercel beigetreten sind, um die Performance von next dev und next build zu verbessern. Wir werden in der nächsten Version weitere Ergebnisse unserer SWC-Integration teilen, wenn sie stabil ist.

Verbesserte Performance

Builds & Data Fetching

Bei Verwendung von next build und zahlreichen HTTP-Anfragen haben wir die Performance um ~2x im Durchschnitt verbessert. Wenn Sie beispielsweise getStaticProps und getStaticPaths verwenden, um Inhalte von einem Headless CMS abzurufen, sollten Sie deutlich schnellere Builds bemerken.

Next.js polyfilled automatisch node-fetch und aktiviert nun standardmäßig HTTP Keep-Alive. Laut externen Benchmarks sollte dies das Pre-Rendering ~2x schneller machen.

Um HTTP Keep-Alive für bestimmte fetch()-Aufrufe zu deaktivieren, können Sie die Agent-Option hinzufügen:

import { Agent } from 'https';
const url = '<https://example.com>';
const agent = new Agent({ keepAlive: false });
fetch(url, { agent });

Um alle fetch()-Aufrufe global zu überschreiben, können Sie next.config.js verwenden:

module.exports = {
  httpAgentOptions: {
    keepAlive: false,
  },
};

Source Maps

Das Einbeziehen von Browser-Source-Maps in Next.js-Anwendungen hat nun etwa 70% weniger Performance-Kosten und etwa 67% weniger Speicherkosten aufgrund von Optimierungen in der Webpack-Asset- und Source-Map-Verarbeitung.

Dies betrifft nur Next.js-Anwendungen mit productionBrowserSourceMaps: true in ihrer next.config.js-Datei. Mit Next.js 11.1 erhöhen sich die Build-Zeiten nur um 11%, wenn Source Maps aktiviert sind.

Wir haben auch mit Sentry zusammengearbeitet, um die Performance beim Hochladen von Source Maps mit dem Sentry Next.js Plugin zu verbessern.

ESLint-Verbesserungen

In Next.js 11 haben wir die integrierte ESLint-Unterstützung durch next lint eingeführt. Seit der Erstveröffentlichung haben wir weiterhin Regeln hinzugefügt, die Entwicklern helfen, häufige Fehler in ihren Anwendungen zu beheben.

Standardmäßige Accessibility-Regeln

Bessere Accessibility-Regeln sind jetzt standardmäßig enthalten, die Probleme mit ARIA-Eigenschaften verhindern, die nicht zusammenpassen, und die Verwendung nicht existierender ARIA-Attribute. Diese Regeln werden standardmäßig warnen.

• aria-props
• aria-proptypes
• aria-unsupported-elements
• role-has-required-aria-props
• role-supports-aria-props

Besonderer Dank geht an den Community-Mitwirkenden JeffersonBledsoe für das Hinzufügen dieser Regeln.

Häufige Tippfehler

Linting für häufige Tippfehler in getStaticProps, getStaticPaths und getServerSideProps warnt nun standardmäßig. Dies hilft bei Fällen, in denen ein kleiner Tippfehler dazu führt, dass Data Fetching nicht aufgerufen wird. Zum Beispiel zeigen getstaticprops oder getStaticprops nun eine Warnung an.

Besonderer Dank geht an den Community-Mitwirkenden kaykdm für das Erstellen dieser Regel.

next/image Verbesserungen

Wir haben Feedback der Community zu next/image und der integrierten Image Optimization gesammelt und freuen uns, mehrere Verbesserungen in Bezug auf Performance, Developer Experience und User Experience teilen zu können.

Image Optimization

Standardmäßig verwendet Next.js WebAssembly zur Bildoptimierung, was die Installationszeit des Next.js-Pakets reduziert, da es deutlich kleiner ist und keinen Post-Install-Schritt hat. Mit Next.js 11.1 können Sie optional sharp installieren, was die ungecachte Bildgenerierungszeit optimiert, auf Kosten einer langsameren Installation.

Der WebAssembly-basierte Bildoptimierer wurde aktualisiert, um ARM-Chips wie Apple M1 mit Node.js 16 zu unterstützen.

Der integrierte Bildoptimierer erkennt nun automatisch den externen Bild-Content-Type basierend auf dem Inhalt des Response-Body. Dies ermöglicht Next.js, Bilder zu optimieren, die auf AWS S3 gehostet werden, wenn der Response-Header Content-Type: application/octet-stream ist.

Lazy-Generierung von Blur-Up-Platzhaltern in der Entwicklung

Während next dev werden statische Bildimporte mit placeholder="blur" nun automatisch lazy-generiert, was die Startzeit des Dev-Servers für Anwendungen mit vielen statischen Bildimporten verbessert:

import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // Der Platzhalter für dieses Bild wird in der Entwicklung lazy-generiert
    <Image src={author} alt="Bild des Autors" placeholder="blur" />
  );
}

Weitere Bildverbesserungen

• Bilder, die zuvor geladen wurden, werden nicht mehr lazy-geladen: Wenn ein Bild zuvor auf einer Seite geladen wurde, entweder durch Client-Navigation oder durch Laden an einer anderen Stelle auf der Seite, überspringt Next.js nun automatisch das Lazy Loading, um ein schnelles Aufblitzen vor dem Anzeigen des Bildes zu vermeiden.
• Unterstützung für benutzerdefinierte Bildloader mit next export: next/image unterstützt nun die Verwendung von next export zusammen mit jedem Drittanbieter-Bildoptimierungsdienst. Sie können images.loader: "custom" in next.config.js konfigurieren, wenn Sie die benutzerdefinierte loader-Prop für next/image bereitstellen möchten.
• Neues Event für vollständig geladene Bilder: Basierend auf Nutzerfeedback haben wir eine neue Eigenschaft onLoadingComplete zu next/image hinzugefügt. Dies ermöglicht die Registrierung eines Callbacks, das aufgerufen wird, sobald das Bild vollständig geladen ist.
• Konfiguration der standardmäßigen Bild-Cache-TTL (Time to Live): Sie können nun images.minimumCacheTTL in next.config.js konfigurieren, um die standardmäßige Cache-TTL für optimierte Bilder zu ändern. Wenn möglich, empfehlen wir die Verwendung von statischen Bild-imports, da diese automatisch die maximale TTL verwenden, da der Bildinhalt-Hash in der URL enthalten ist.

Community

Next.js ist das Ergebnis der gemeinsamen Arbeit von über 1.700 einzelnen Entwicklern, Industriepartnern wie Google und Facebook und unserem Kernteam.

Wir sind stolz darauf, dass diese Community weiter wächst. Innerhalb der letzten sechs Monate allein haben wir eine 50%ige Steigerung der Next.js-Downloads auf NPM gesehen, von 4,1M auf 6,2M, und die Anzahl der Homepages, die Next.js in den Alexa Top 10.000 verwenden, ist um 50% gestiegen.

Diese Version wurde durch die Beiträge von ermöglicht: @abotsi, @adam-cowley, @afbarbaro, @akellbl4, @AndreVarandas, @andys-github, @angeloashmore, @apuyou, @arturmuller, @AryanBeezadhur, @atcastle, @borekb, @brandonchinn178, @breyed, @brijendravarma, @ctbarna, @ctjlewis, @darshkpatel, @delbaoliveira, @destruc7i0n, @devknoll, @enesakar, @enzoferey, @euess, @fabb, @gnbaron, @hiro0218, @housseindjirdeh, @huozhi, @ijjk, @JacobLey, @jameshoward, @jamsinclair, @janicklas-ralph, @jarvelov, @javivelasco, @jaybekster, @JeffersonBledsoe, @jflayhart, @johnrackles, @jviide, @karlsander, @kasipavankumar, @kaykdm, @kdy1, @kylemh, @leerob, @LetItRock, @lsndr, @lucleray, @m-abdelwahab, @mandarons, @markkaylor, @mastoj, @michalbundyra, @michielvangendt, @Munawwar, @mvasilkov, @NickCrews, @NickKelly1, @noahweingand, @noreiller, @nyedidikeke, @omasher, @orta, @pa-rang, @padmaia, @papaponmx, @PaulvdDool, @petermekhaeil, @phocks, @pranavp10, @qwertyforce, @raon0211, @reod, @rishabhpoddar, @roim, @Ryz0nd, @sa3dany, @sachinraja, @samrobbins85, @schoenwaldnils, @schultzp2020, @sedlukha, @sergioalvz, @shibe23, @smitssjors, @sohamsshah, @sokra, @stefanprobst, @stovmascript, @stuymedova, @styfle, @tanys123, @ThangHuuVu, @theostrahlen, @thomasmarshall, @tigger9flow, @timneutkens, @Timvdv, @tmcgann, @tomchen, @UniqueNL, @Vadorequest, @vitalybaev, @yunger7, @zackdotcomputer, @zeekrey