BackZurück zum Blog

Next.js 10.2

Next.js 10.2 führt Leistungsverbesserungen (schnellere Builds, Refresh und Startzeiten), verbesserte Barrierefreiheit, automatische Webfont-Optimierung und mehr ein!

Wir freuen uns, Next.js 10.2 mit folgenden Neuerungen vorzustellen:

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

Webpack 5

Mit Next.js 10.1 haben wir Fast Refresh verbessert und Installationszeiten reduziert. Wir freuen uns, weitere durch webpack 5 ermöglichte Leistungsverbesserungen vorzustellen.

Ab Next.js 10.2 wird webpack 5 für alle Anwendungen automatisch verwendet, die keine benutzerdefinierte webpack-Konfiguration in ihrer next.config.js verwenden.

Bei aktiviertem webpack 5 erhalten Sie automatisch neue Funktionen und Verbesserungen wie:

  • Verbessertes Disk-Caching: Das Disk-Caching ermöglicht es dem Compiler, Arbeiten zwischen next build-Läufen beizubehalten. Nur geänderte Dateien werden neu kompiliert, was zu einer höheren Performance führt. Vercel-Kunde Scale beobachtete eine 63% schnellere Build-Zeit bei nachfolgenden Builds.
  • Verbessertes Fast Refresh: Next.js priorisiert jetzt die Fast Refresh-bezogene Kompilierung, was zu einem 100ms bis 200ms schnelleren Refresh führt.
  • Verbessertes Langzeit-Caching von Assets: Die Ausgabe zwischen mehreren next build-Läufen ist jetzt deterministisch, was das Browser-Caching von JavaScript-Assets in der Produktion verbessert. Hashes bleiben gleich, wenn sich der Inhalt einer Seite nicht ändert.
  • Verbessertes Tree Shaking: CommonJS-Module können jetzt getree shaked werden, um ungenutzten Code automatisch zu entfernen. Statische Analyse wird verwendet, um nebenwirkungsfreie Module zu identifizieren. export * verfolgt mehr Informationen und markiert den Standard-Export nicht mehr als verwendet. Inner-module Tree-Shaking ist ebenfalls aktiviert, wodurch Imports, die nur in einem ungenutzten Export verwendet werden, entfernt werden können.

Wir haben hart daran gearbeitet, einen reibungslosen Übergang von webpack 4 zu 5 zu gewährleisten. Die Next.js-Kern-Testsuite mit über 3.400 Integrationstests läuft bei jedem Pull Request mit aktivierter webpack 5-Unterstützung.

Wenn Ihre Anwendung eine benutzerdefinierte webpack-Konfiguration verwendet, empfehlen wir, der Dokumentation zur Aktivierung von webpack 5 zu folgen. Nach dem Upgrade auf webpack 5 in Next.js, teilen Sie uns bitte Ihr Feedback mit.

Verbesserte Startperformance

Wir haben die Initialisierung der Next.js-CLI verbessert, wodurch die Startzeit für next dev nach dem ersten Lauf bis zu 24% schneller ist. Zum Beispiel ging next dev für vercel.com von 3.3s auf 2.5s zurück.

Wir haben uns zum Ziel gesetzt, Ihre lokale Entwicklungserfahrung in Echtzeit zu verbessern (20x schneller). Bleiben Sie gespannt auf weitere Startperformance-Verbesserungen in zukünftigen Releases.

Verbesserungen der Barrierefreiheit

Routenwechsel werden jetzt standardmäßig Screenreadern und anderen assistiven Technologien mitgeteilt.

Das folgende Beispiel zeigt, wie die Überschrift "Real Data. Real Performance" von macOS VoiceOver bei clientseitiger Navigation angesagt wird. Der Seitenname wird zuerst durch Suche nach einem <h1>-Element ermittelt, falls nicht vorhanden durch document.title und zuletzt durch den Pfadnamen.

Routenwechsel werden jetzt automatisch angesagt.

Vielen Dank an Kyle Boss und Kitty Giraudel für die Unterstützung bei der Implementierung dieser Funktion.

Routing basierend auf Headern und Query-String-Parametern

Next.js Rewrites, Redirects und Headers unterstützen jetzt eine neue has-Eigenschaft, die den Abgleich mit eingehenden Headern, Cookies und Query-Strings ermöglicht.

Vercel-Kunde Joyn verwendet has, um Inhalte sowohl für die Auffindbarkeit als auch die Performance zu optimieren. Beispielsweise könnten Sie alte Browser basierend auf dem User-Agent umleiten:

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!old-browser$).*)',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value:
              'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)',
          },
        ],
        destination: '/old-browser',
        permanent: false,
      },
    ];
  },
};

Ein weiteres Beispiel könnte die Umleitung von Benutzern basierend auf ihrem Standort sein:

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!uk/).*)',
        has: [
          {
            type: 'header',
            key: 'x-vercel-ip-country',
            value: 'GB',
          },
        ],
        destination: '/uk/:path*',
        permanent: true,
      },
    ];
  },
};

Schließlich könnten Sie Benutzer umleiten, die bereits eingeloggt sind:

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)',
          },
        ],
        destination: '/dashboard?authorized=:authorized',
        permanent: false,
      },
    ];
  },
};

Um mehr zu erfahren und weitere Beispiele zu erkunden, lesen Sie die Redirects-Dokumentation.

Automatische Webfont-Optimierung

82% der Webseiten für Desktop verwenden Webfonts. Benutzerdefinierte Schriftarten sind wichtig für das Branding, Design und die konsistente Darstellung über verschiedene Browser und Geräte hinweg. Die Verwendung von Webfonts sollte jedoch nicht auf Kosten der Performance gehen.

Next.js unterstützt jetzt automatische Webfont-Optimierung bei der Verwendung von Webfonts. Standardmäßig wird Next.js Font-CSS zur Build-Zeit inline einbinden, wodurch ein zusätzlicher Roundtrip zum Abrufen von Font-Deklarationen entfällt. Dies führt zu Verbesserungen bei First Contentful Paint (FCP) und Largest Contentful Paint (LCP). Beispiel:

// Vorher
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
 
// Nachher
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    <!-- ... -->
  }
</style>

Die automatische Webfont-Optimierung unterstützt derzeit Google Fonts, und wir arbeiten daran, die Unterstützung auf weitere Font-Anbieter auszuweiten. Wir planen auch, die Kontrolle über Ladestrategien und font-display-Werte hinzuzufügen. Durch die standardmäßige Optimierung von Fonts können wir Entwicklern helfen, schnellere Websites zu erstellen und ihre Core Web Vitals ohne zusätzlichen Aufwand zu verbessern.

Vielen Dank an unsere Partner bei Google und Janicklas Ralph für die Unterstützung bei der Implementierung dieser Funktion.

Teamwachstum

Wir freuen uns bekannt zu geben, dass Tobias Koppers, der Autor von webpack, dem Next.js-Team bei Vercel beigetreten ist.

Community

Wir sind dankbar für unsere Community, einschließlich aller externen Feedbacks und Beiträge, die diese Version mitgestaltet haben.

Diese Version wurde durch die Beiträge von ermöglicht: @rpxs, @lemarier, @RayhanADev, @janicklas-ralph, @devknoll, @felipeptcho, @rishabhpoddar, @sokra, @m-leon, @turadg, @PierreBerger, @divmain, @dominikwilkowski, @pranavp10, @ijjk, @santidalmasso, @HaNdTriX, @jamesgeorge007, @garmeeh, @leerob, @shuding, @feute, @timneutkens, @alexvilchis, @Timer, @malixsys, @sahilrajput03, @marcvangend, @steven-tey, @julienben, @umarsenpai, @Mzaien, @merceyz, @AntelaBrais, @SystemDisc, @M1ck0, @jbmoelker, @jaisharx, @amannn, @vkarpov15, @gaelhameon, @4ortytwo, @Simply007, @styxlab, @xCloudzx, @wodCZ, @emmanuelgautier, @leosuncin, @ludder, @geritol, @vassbence, @vvo, @portenez, @arshad, @tarunama, @flybayer, @Hanaffi, @SokratisVidros, @chibicode, @kylemarshall18 und @jarrodwatts.