BackZurück zum Blog

Next.js 13.5

Next.js 13.5 bietet 22 % schnellere lokale Serverstartzeiten, 29 % schnellere HMR (Fast Refresh), 40 % weniger Speicherverbrauch und mehr.

Next.js 13.5 verbessert die lokale Entwicklungsleistung und Zuverlässigkeit mit:

Aktualisieren Sie heute und melden Sie sich für die Next.js Conf am 26. Oktober an:

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

Verbesserte Startzeiten und Fast Refresh

Wir freuen uns über die anhaltende Akzeptanz des App Routers, der jetzt monatlich um 80 % wächst, basierend auf den Top-10-Millionen-Origins, die vom HTTP Archive erfasst werden.

2023 CRuX Dataset für die Top 1 Million mobiler Websites im Web

Seit Next.js 13.4 lag unser Fokus auf der Verbesserung der Leistung und Zuverlässigkeit für App-Router-Anwendungen. Beim Vergleich von 13.4 mit 13.5 haben wir bei einer neuen Anwendung folgende Verbesserungen festgestellt:

  • 22 % schnellerer lokaler Serverstart
  • 29 % schnelleres HMR (Fast Refresh)
  • 40 % weniger Speicherverbrauch

Diese Leistungssteigerung konnten wir durch Optimierungen wie folgende erreichen:

  • Weniger Arbeit durch Caching oder Minimierung langsamer Operationen
  • Optimierung teurer Dateisystemoperationen
  • Bessere inkrementelle Baumabtastung während der Kompilierung
  • Verlagerung unnötiger blockierender synchroner Aufrufe auf lazy
  • Automatische Konfiguration großer Icon-Bibliotheken

Next.js-Nutzer Lattice berichtete von 87-92 % schnellerer Kompilierung in ihren Tests.

Während wir weiterhin unsere aktuelle Bundler-Leistung verbessern, arbeiten wir parallel auch an Turbopack (Beta), um die Leistung weiter zu steigern. Mit 13.5 unterstützt next dev --turbo nun mehr Funktionen.

Optimierte Paketimporte

Wir haben einen spannenden Durchbruch bei der Optimierung von Paketimporten erzielt, der sowohl die lokale Entwicklungsleistung als auch Produktions-Cold-Starts verbessert, wenn große Icon- oder Komponentenbibliotheken oder andere Abhängigkeiten verwendet werden, die Hunderte oder Tausende von Modulen erneut exportieren.

Zuvor haben wir die Unterstützung für modularizeImports hinzugefügt, mit der Sie konfigurieren können, wie Importe bei der Verwendung dieser Bibliotheken aufgelöst werden sollen. In 13.5 haben wir diese Option durch optimizePackageImports ersetzt, bei dem Sie keine Zuordnung der Importe angeben müssen, sondern die Importe automatisch für Sie optimiert werden.

Bibliotheken wie @mui/icons-material, @mui/material, date-fns, lodash, lodash-es, ramda, react-bootstrap, @headlessui/react, @heroicons/react und lucide-react werden jetzt automatisch optimiert, indem nur die Module geladen werden, die Sie tatsächlich verwenden, während Sie den Komfort von import-Anweisungen mit vielen benannten Exporten behalten.

PR ansehen oder mehr erfahren über optimizePackageImports in unserer Dokumentation.

Verbesserungen bei next/image

Basierend auf Community-Feedback haben wir eine neue experimentelle Funktion unstable_getImgProps() hinzugefügt, um erweiterte Anwendungsfälle ohne direkte Verwendung der <Image>-Komponente zu unterstützen, darunter:

import { unstable_getImgProps as getImgProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImgProps({ ...common, src: '/dark.png' });
  const {
    props: { srcSet: light, ...rest },
  } = getImgProps({ ...common, src: '/light.png' });
 
  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      <img {...rest} />
    </picture>
  );
}

Zusätzlich unterstützt die placeholder-Prop jetzt die Bereitstellung beliebiger data:image/ für Platzhalterbilder, die nicht unscharf gemacht werden sollen (Demo).

Mehr erfahren über next/image in unserer Dokumentation.

Weitere Verbesserungen

Seit 13.4.0 haben wir über 438 Fehler behoben und verschiedene Verbesserungen vorgenommen, darunter:

  • [Dokumentation] Neue Dokumentation zu Formularen und Mutationen
  • [Dokumentation] Neue Dokumentation zu Server- und Client-Komponenten
  • [Dokumentation] Neue Dokumentation zu Content Security Policy und Nonces
  • [Dokumentation] Neue Dokumentation zu Caching und Revalidierung
  • [Funktion] useParams und useSearchParams aus next/navigation funktionieren jetzt im Pages Router für inkrementelle Übernahme
  • [Funktion] Unterstützung für scroll: false bei router.push / router.replace
  • [Funktion] Unterstützung für scroll={false} bei next/link
  • [Funktion] HTTPS-Unterstützung für die Entwicklung: next dev --experimental-https
  • [Funktion] Unterstützung für cookies().has() hinzugefügt (Dokumentation)
  • [Funktion] Unterstützung für IPv6-Hostnamen hinzugefügt
  • [Funktion] Unterstützung für Yarn PnP mit dem App Router hinzugefügt
  • [Funktion] Unterstützung für redirect() in Server Actions hinzugefügt
  • [Funktion] Unterstützung für die Verwendung von Bun beim Erstellen von Projekten: bunx create-next-app (Dokumentation)
  • [Funktion] Draft-Mode-Unterstützung für die Verwendung in Middleware und der Edge Runtime
  • [Funktion] cookies() und headers() werden jetzt in Middleware unterstützt
  • [Funktion] Die Metadata API unterstützt jetzt summary_large_image in Twitter-Karten
  • [Funktion] RedirectType wird jetzt aus next/navigation exportiert
  • [Funktion] Experimenteller Testmodus für Playwright hinzugefügt (Dokumentation)
  • [Verbesserung] next start wurde überarbeitet, um 1062 % mehr Anfragen/Sekunde zu verarbeiten
  • [Verbesserung] Next.js-Interna wurden optimiert, um Cold Starts zu verbessern (bis zu 40 % schneller, getestet auf Vercel)
  • [Verbesserung] Bessere Jest-Unterstützung für den App Router (PR)
  • [Verbesserung] Überarbeitete next dev-Ausgabe (PR)
  • [Verbesserung] Server Actions funktionieren jetzt mit vollständig statischen Routen (einschließlich Revalidierung von Daten mit ISR)
  • [Verbesserung] Server Actions blockieren keine Navigation zwischen Routen mehr
  • [Verbesserung] Server Actions können keine mehreren gleichzeitigen Aktionen mehr auslösen
  • [Verbesserung] Server Actions, die redirect() aufrufen, fügen jetzt einen Eintrag in den Verlauf ein, anstatt den aktuellen Eintrag zu ersetzen, um die Funktionalität des Zurück-Buttons zu gewährleisten
  • [Verbesserung] Server Actions fügen no-cache, no-store cache-control-Header hinzu, um das Browser-Caching zu verhindern
  • [Verbesserung] Ein Fehler wurde behoben, bei dem Server Actions nach der Navigation zweimal aufgerufen werden konnten
  • [Verbesserung] Verbesserte Unterstützung für Emotion CSS mit Server-Komponenten
  • [Verbesserung] Unterstützung für scroll-behavior: smooth bei Hash-URL-Änderungen
  • [Verbesserung] Polyfill für Array.prototype.at in allen Browsern hinzugefügt
  • [Verbesserung] Race Condition im next dev-Cache bei der Verarbeitung mehrerer paralleler Anfragen behoben
  • [Verbesserung] fetch-Ausgabe in der Konsole zeigt jetzt Anfragen an, die den Cache mit cache: SKIP übersprungen haben
  • [Verbesserung] usePathname entfernt jetzt korrekt basePath
  • [Verbesserung] next/image lädt Bilder im App Router jetzt korrekt vor
  • [Verbesserung] not-found rendert das Root-Layout nicht mehr doppelt
  • [Verbesserung] NextRequest kann jetzt geklont werden (z.B. new NextRequest(request))
  • [Verbesserung] app/children/page.tsx funktioniert jetzt korrekt für wörtliche /children-Routen
  • [Verbesserung] Content Security Policy unterstützt jetzt nonce für vorinitialisierte Skripte
  • [Verbesserung] Die Verwendung von redirect aus next/navigation unterstützt jetzt basePath
  • [Verbesserung] Behoben, dass process.env während des Renderings im output: 'standalone'-Modus nicht verfügbar war
  • [Verbesserung] Verbesserte Fehlermeldung bei Verwendung eines Static Exports mit nicht unterstützten Funktionen
  • [Verbesserung] Verbesserte rekursive readdir-Implementierung (~3x schneller)
  • [Verbesserung] Behoben, dass fallback: false mit dynamischen Routensegmenten zuvor hängende Anfragen verursachte
  • [Verbesserung] Behobener Fehler, bei dem signal an Revalidate-Anfragen übergeben wurde, was zu Fehlern führte, wenn die Anfrage bereits abgebrochen war
  • [Verbesserung] Entferntes fetch-Polling auf der 404-Seite zugunsten von WebSocket-Events, um unnötige Neuladungen bei der Ausführung von next dev zu verhindern
  • [Verbesserung] performance.measure kann keine Hydratisierungsfehlanpassung mehr verursachen
  • [Verbesserung] Behobene Fälle, in denen eine unerwartete vollständige Neuladung bei der Bearbeitung von pages/_app auftreten konnte
  • [Verbesserung] ImageResponse erweitert jetzt Response für eine verbesserte Typüberprüfung (PR)
  • [Verbesserung] pages wird nicht mehr angezeigt, wenn keine pages-Ausgabe in next build vorhanden ist
  • [Verbesserung] Behoben, dass skipTrailingSlashRedirect in <Link> ignoriert wurde
  • [Verbesserung] Behobene duplizierte dynamische Metadata-Routen im Entwicklungsmodus

Mitwirkende

Next.js ist das Ergebnis der gemeinsamen Arbeit von über 2.800 einzelnen Entwicklern, Industriepartnern wie Google und Meta und unserem Kernteam bei Vercel. Treten Sie der Community auf GitHub Discussions, Reddit und Discord bei.

Diese Version wurde ermöglicht durch:

Und die Beiträge von: @opnay, @vinaykulk621, @goguda, @coreyleelarson, @bencmbrook, @cramforce, @williamli, @stefanprobst, @feugy, @Kikobeats, @dvoytenko, @MaxLeiter, @devjiwonchoi, @lacymorrow, @kylemcd, @tibi1220, @iamarpitpatidar, @pythagoras-yamamoto, @alexkirsz, @jsteele-stripe, @tknickman, @gaojude, @janicklas-ralph, @ericfennis, @JohnAdib, @MiLk, @delbaoliveira, @leerob, @LuudJanssen, @lucasconstantino, @davecarlson, @colinhacks, @jantimon, @Banbarashik, @ForsakenHarmony, @arturbien, @gnoff, @hsrvms, @DuCanhGH, @tim-hanssen, @Aryan9592, @rishabhpoddar, @Lantianyou, @joulev, @AkifumiSato, @trigaten, @HurSungYun, @DevLab2425, @SukkaW, @daniel-web-developer, @ky1ejs, @wyattjoh, @ShaunFerris, @syedtaqi95, @Heidar-An, @Jeffrey-Zutt, @Ryan-Dia, @steppefox, @hiro0218, @rjsdnql123, @fgiuliani, @steven-tey, @AntoineBourin, @adamrhunter, @darshanjain-entrepreneur, @s0h311, @djreillo, @dijonmusters, @cassidoo, @anonrig, @gfgabrielfranca, @Bitbbot, @BrennanColberg, @Nick-Mazuk, @thomasballinger, @lucgagan, @nroland013, @SonMooSans, @jenewland1999, @thorwebdev, @jyunhanlin, @Gnadhi, @yagogmaisp, @carlos-menezes, @ryo-manba, @vamcs, @matepapp, @SleeplessOne1917, @ecklf, @karlhorky, @starunaway, @FernandVEYRIER, @Terro216, @anthonyshew, @suhaotian, @simonswiss, @feikerwu, @lubakravche, @masnormen, @bottxiang, @mhmdrioaf, @tyler-lutz, @vincenthongzy, @yigithanyucedag, @doinki, @danger-ahead, @bre30kra69cs, @Yash-Singh1, @krmeda, @bigyanse, @2-NOW, @Mingyu-Song, @morganfeeney, @aralroca, @nickmccurdy, @adamjmcgrath, @angel1254mc, @cxa, @ibash, @mohanraj-r, @kevinmitch14, @iaurg, @steebchen, @Cow258, @charlesbdudley, @tyhopp, @Drblessing, @milovangudelj, @jacobsfletch, @JoshuaKGoldberg, @zignis, @ChristianIvicevic, @mrxbox98, @oliviertassinari, @fsansalvadore, @tvthatsme, @dvakatsiienko, @brunoeduardodev, @sonam-serchan, @vicsantizo, @leodr, @wiscaksono, @hustLer2k, @joshuabaker, @shozibabbas, @omarhoumz, @jamespearson, @tristndev, @AldeonMoriak, @manovotny, @mirismaili, @SuttonJack, @jeremydouglas, @JanCizmar, @mltsy, @WilderDev, @Guilleo03, @Willem-Jaap, @escwxyz, @wiredacorn, @Ethan-Arrowood, @BaffinLee, @greatSumini, @ciruz, @kijikunnn, @DustinsCode, @riqwan, @joostdecock, @nikolovlazar, @Bowens20832, @JohnAlbin, @gidgudgod, @maxproske, @dunklesToast, @yyuemii, @mPaella, @mknichel, @niko20, @mkcy3, @valentinpolitov, @smaeda-ks, @keyz, @Schniz, @koba04, @jiwooIncludeJeong, @ethanmick, @didemkkaslan, @itsmingjie, @v1k1, @thepatrick00, @taylorbryant, @kvnang, @alainkaiser, @simPod, @svarunid, @pauek, @lycuid, @MarkAtOmniux, @darshkpatel, @johnta0, @devagrawal09, @ibrahemid, @JesseKoldewijn, @javivelasco, @05lazy, @alexanderbluhm, @Fonger, @souporserious, @DevEsteves, @sanjaiyan-dev, @g12i, @cesarkohl, @josh, @li-jia-nan, @gabschne, @akd-io, @runjuu, @jocarrd, @nnnnoel, @ferdingler und @ikryvorotenko