Wie wir auf der Next.js Conf angekündigt haben, setzen wir unsere Mission für die beste Developer Experience mit Next.js 11 fort, die folgende Features bietet:
- Konformität: Ein System, das sorgfältig entwickelte Lösungen für optimale UX bereitstellt.
- Verbesserte Leistung: Weitere Optimierungen, um die Kaltstartzeit zu verbessern, sodass Sie schneller mit der Entwicklung beginnen können.
next/script: Automatische Priorisierung des Ladens von Drittanbieter-Skripten zur Leistungsverbesserung.next/image: Reduzierung von Layout-Shifts und eine flüssigere visuelle Erfahrung mit automatischer Größenermittlung und Unterstützung für Blur-Up-Platzhalter.- Webpack 5: Jetzt standardmäßig für alle Next.js-Anwendungen aktiviert, was diese Vorteile allen Next.js-Entwicklern bringt.
- Create React App Migration (Experimentell): Automatische Konvertierung von Create React App in eine Next.js-kompatible Anwendung.
- Next.js Live (Preview Release): Code im Browser, mit Ihrem Team, in Echtzeit.
Aktualisieren Sie heute durch Ausführen von npm i next@latest react@latest react-dom@latest und lesen Sie die Migrationsanleitung unten.
Konformität
Selbst mit großartigen Tools und automatischen Optimierungen in Frameworks werden Seitenbetreiber und App-Entwickler oft aufgefordert, Experten in UX-Qualitätsthemen wie Leistung, Sicherheit und Barrierefreiheit zu werden. Wenn Features hinzugefügt werden und Teams wachsen, müssen Entwickler anders denken.
Durch ihre Arbeit an groß angelegten Webanwendungen wie Search und Maps hat Google bewiesen, dass Frameworks eine entscheidende Rolle bei der Aufrechterhaltung der Qualität spielen können, wenn Teams und Anwendungen skalieren. Durch ein System starker Standardeinstellungen und Sicherheitsvorkehrungen ermöglichen sie Entwicklern, sich mehr auf Features und Produkte zu konzentrieren.
Heute hat Googles Web Platforms Team begonnen, ihr System mit Konformität für Next.js zu open-sourcen.
Konformität ist ein System, das sorgfältig entwickelte Lösungen und Regeln bereitstellt, um optimales Laden und Core Web Vitals zu unterstützen, mit weiteren Ergänzungen für andere Qualitätsaspekte wie Sicherheit und Barrierefreiheit. Diese Lösungen befreien Ihr Team davon, sich alle neuesten Regeln für optimale Ladeleistung zu merken, während Sie dennoch die Flexibilität haben, die richtigen Entscheidungen für Ihre Anwendungen zu treffen.
Neben vielen grundlegenden Optimierungen, die auf Leistungsforschung basieren, unterstützt Next.js 11 jetzt ESLint out-of-the-box, um das Erkennen von Framework-spezifischen Problemen während der Entwicklung zu erleichtern und Richtlinien für Ihr Team festzulegen, um Best Practices auch beim Skalieren sicherzustellen.
Um mit ESLint zu beginnen, führen Sie npx next lint nach dem Upgrade auf Next.js 11 aus. Die ESLint-Integration funktioniert für neue und bestehende Next.js-Anwendungen und bietet einen neuen Satz von Regeln, um Entwicklern beim Erstellen besserer Anwendungen zu helfen.
Erfahren Sie mehr über Konformität für Frameworks auf Googles Blog.
Verbesserte Leistung
Seit Next.js 10 sind wir besessen davon, die Developer Experience von Next.js weiter zu verbessern. In 10.1 und 10.2 haben wir die Startzeit um bis zu 24% verbessert und weitere 40% der Verarbeitungszeit für Änderungen durch React Fast Refresh eingespart. Sie erhalten diese erstaunlichen Geschwindigkeitsverbesserungen einfach durch das Aktualisieren von Next.js.
Next.js 11 enthält eine weitere Optimierung für Babel, um die Startzeit weiter zu reduzieren. Wir haben eine brandneue Implementierung des Babel-Loaders für webpack erstellt, der das Laden optimiert und eine In-Memory-Konfigurations-Caching-Schicht hinzufügt. In der Praxis bedeutet dies keine Änderung für Entwickler, aber letztendlich eine schnellere Entwicklungserfahrung.
Skript-Optimierung
Die neue Next.js Script-Komponente ist eine grundlegende Optimierung, die Entwicklern ermöglicht, die Lade-Priorität von Drittanbieter-Skripten festzulegen, um Entwicklerzeit zu sparen und die Ladeleistung zu verbessern.
Websites benötigen oft Drittanbieter für Dinge wie Analysen, Anzeigen, Kundensupport-Widgets und Consent-Management. Diese Skripte belasten jedoch oft die Ladeleistung und können die Benutzererfahrung beeinträchtigen. Entwickler kämpfen oft damit, sie an der optimalen Stelle in einer Anwendung zu platzieren.
Mit next/script können Sie die strategy-Eigenschaft definieren, und Next.js priorisiert sie automatisch, um die Ladeleistung zu verbessern:
beforeInteractive: Für kritische Skripte, die vor der Interaktivität der Seite geladen und ausgeführt werden müssen, wie Bot-Erkennung und Consent-Management. Diese Skripte werden in das initiale HTML vom Server eingefügt und laufen, bevor selbst gebündelter JavaScript-Code ausgeführt wird.afterInteractive(Standard): Für Skripte, die nach der Interaktivität der Seite geladen und ausgeführt werden können, wie Tag-Manager und Analysen. Diese Skripte werden clientseitig eingefügt und laufen nach der Hydration.lazyOnload: Für Skripte, die während der Leerlaufzeit geladen werden können, wie Chat-Support und Social-Media-Widgets.
Sie können auch Code nach dem Laden ausführen. Beispielsweise können Sie warten, bis ein Benutzer eine Zustimmung gegeben hat:
Wir haben auch das standardmäßige Skript-Ladeverhalten in Next.js 11 von Preloading und async auf defer geändert. Drittanbieter-Skripte konkurrieren oft mit höher priorisierten Ressourcen wie CSS, Schriftarten und Bildern. Die Beibehaltung der richtigen Reihenfolge im Verhältnis zu diesen Ressourcen sowie anderen Skripten ist eine unangemessene Belastung für Entwickler.
Durch die Bereitstellung einer Script-Komponente mit einer Standard-Ladestrategie von afterInteractive haben Entwickler jetzt bessere Standardeinstellungen für optimale Leistung, mit der Möglichkeit, bei Bedarf beforeInteractive zu wählen.
Um mehr über die technischen Entscheidungen hinter dieser Änderung zu erfahren, lesen Sie das RFC und die Herausforderungen mit Preload vom Google Chrome-Team.
Bildverbesserungen
Wir freuen uns, zwei der am häufigsten nachgefragten Features der Community für die next/image-Komponente vorzustellen: Reduzierung von Cumulative Layout Shift und eine flüssigere visuelle Erfahrung.
Automatische Größenermittlung (Lokale Bilder)
Verwenden Sie das import-Schlüsselwort für die Bild-src, um automatisch width und height für statische Bilder zu definieren.
Beispielsweise ist die Verwendung der integrierten Image-Komponente jetzt noch einfacher:
Bildplatzhalter
next/image unterstützt jetzt Blur-Up-Platzhalter, um den Übergang vom leeren Raum zum Bild zu erleichtern und die wahrgenommene Ladezeit zu reduzieren, insbesondere für Benutzer mit langsamer Internetverbindung.
Um verschwommene Platzhalter zu verwenden, fügen Sie placeholder="blur" zu Ihrem Bild hinzu.
Next.js unterstützt auch das Verschleiern dynamischer Bilder, indem Sie eine benutzerdefinierte blurDataURL bereitstellen können, die von Ihrem Backend stammt. Beispielsweise können Sie einen blurha.sh auf dem Server generieren.
Webpack 5
Mit Next.js 10.2 haben wir die Einführung von webpack 5 auf alle Anwendungen ohne benutzerdefinierte webpack-Konfiguration in ihrer next.config.js ausgeweitet. Heute machen wir webpack 5 zum Standard für alle Next.js-Anwendungen, was eine Vielzahl von Features und Verbesserungen bietet.
Wir haben eng mit der Community zusammengearbeitet, um einen reibungslosen Übergang zu webpack 5 zu gewährleisten. Über 3.400 bestehende Next.js-Integrationstests laufen bei jedem Pull Request mit aktiviertem webpack 5.
Wenn Ihre Anwendung eine benutzerdefinierte webpack-Konfiguration hat, empfehlen wir, die Upgrade-Dokumentation für webpack 5 zu befolgen. Wenn Sie auf Probleme stoßen, teilen Sie uns bitte Ihr Feedback mit.
Create React App Migration
In den letzten sechs Monaten haben wir eine Zunahme von Anwendungen beobachtet, die von Create React App migrieren zu Next.js, um viele der Developer Experience- und Endbenutzerleistungsverbesserungen von Next.js zu nutzen.
Um Entwicklern bei der Konvertierung ihrer Anwendungen zu Next.js zu helfen, haben wir ein neues Tool zu @next/codemod hinzugefügt, das Create React App-Anwendungen automatisch in Next.js-kompatible Anwendungen umwandelt.
Die Transformation fügt automatisch ein pages/-Verzeichnis hinzu und verschiebt CSS-Imports an die richtige Stelle. Es aktiviert auch einen Create React App-Kompatibilitätsmodus in Next.js, der sicherstellt, dass einige in Create React App verwendete Muster mit Next.js funktionieren.
Durch Nutzung der neuen Transformation können Sie Next.js schrittweise einführen, während die Funktionalität der bestehenden Create React App-Anwendung erhalten bleibt.
Um mit der Migration Ihres Create React App-Projekts zu beginnen, verwenden Sie den folgenden Befehl:
Dieses Feature ist derzeit experimentell. Bitte teilen Sie Ihr Feedback in dieser Diskussion.
Next.js Live (Preview Release)
Next.js Live ist eine Fortsetzung unserer Mission, die Entwicklung nicht nur schneller und angenehmer zu machen, sondern vor allem inklusiver für die gesamte Organisation. Durch Nutzung modernster Technologien wie ServiceWorker, WebAssembly und ES Modules bringt Next.js Live den gesamten Entwicklungsprozess in den Webbrowser. Dies eröffnet Möglichkeiten wie Zusammenarbeit und sofortiges Teilen mit einer URL, ohne Build-Schritt. Für Entwickler bedeutet dies eine schnellere Feedback-Schleife, weniger Wartezeit auf Builds und Echtzeit-Peer-Programming und -Bearbeitung im Browser.
Um mehr über Next.js Live und wie Sie es mit Vercels Echtzeit-Kollaborations-Engine kombinieren können, lesen Sie den Abschnitt Next.js Live in der Dokumentation.
Upgrade-Anleitung
Next.js 11 führt einige Breaking Changes ein, die die meisten Benutzer nicht betreffen sollten. Diese Legacy-Features wurden jahrelang abwärtskompatibel gehalten, einige bis zurück zu v4.0.
Diese Features wurden entfernt, um die Bundle-Größe zu verringern und die Codebasis für die Zukunft wartbar zu halten. Um mehr über das Upgrade von Version 10 auf 11 zu erfahren, lesen Sie die Upgrade-Anleitung.
Mit Next.js 11 wurde die minimale React-Version auf 17.0.2 aktualisiert. Weitere Details finden Sie im React 17 Blogpost. Wir arbeiten auch eng mit dem React-Team zusammen, während sie React 18 einführen. Next.js 11 verwendet createRoot, wenn React 18 Alpha verwendet wird.
Community
Next.js ist das Ergebnis der gemeinsamen Arbeit von über 1.600 individuellen Entwicklern, Industriepartnern wie Google und Facebook und unserem Kernteam.
Wir sind stolz darauf, dass diese Community weiter wächst. Allein in den letzten sechs Monaten haben wir eine 50%ige Steigerung der Next.js-Downloads auf NPM gesehen, von 4,1 Mio. auf 6,2 Mio., 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: @kahy9, @ljosberinn, @leerob, @kettanaito, @thomasboyt, @hussainanjar, @styfle, @devknoll, @LiuuY, @timneutkens, @housseindjirdeh, @PepijnSenders, @janicklas-ralph, @payapula, @tmtk75, @ijjk, @hiramhuang, @daku10, @atcastle, @matamatanot, @pelhage, @Lukazovic, @Mzaien, @gleich, @geshan, @Munawwar, @ykzts, @vitalybaev, @mottox2, @vvo, @chrisneven, @turneand, @d3lm, @akellbl4, @sokra, @johnjago, @alicanyildirim, @sanathusk, @valse, @samrobbins85, @SamVerschueren, @ademilter, @ctjlewis, @brandondc741, @eltociear, @martpie, @kasipavankumar, @joecohens, @alexbrazier, @jamsinclair, @fabianishere, @rokinsky, @msidqi, @rubensdemelo, @Simply007, @bradlc, @SinimaWath, @rgabs, @darshkpatel, @sumanthratna, @shuding, @prophet1996, @Joonpark13, @tremby, @stefanprobst, @dopt, @rishabhpoddar, @aydinkn, @ErfanMirzapour, @tubbo, @frontendtony, @eric-burel, @iker-barriocanal, @eps1lon, @Gigiz, @mplis, @HaNdTriX und @jigsawye.
Die folgenden Features wurden auf der Next.js Conf erwähnt, wurden aber bereits früher in den Versionen 10.1 und 10.2 ausgeliefert:
- Automatische Webfont-Optimierung: Verbesserte Leistung durch Inlining von Font-CSS.
- Schnelleres Refresh: 100ms bis 200ms schnelleres Refresh.
next/image-Verbesserungen: Apple Silicon (M1)-Unterstützung sowie mehr Layout- und Loader-Optionen.- Next.js Commerce Shopify-Integration: Flexible Datenebene für komponierbare E-Commerce-Apps. Next.js Commerce unterstützt derzeit Shopify, BigCommerce, Saleor, Swell und Vendure.