Next.js 14.1

Next.js 14.1 beinhaltet Verbesserungen der Entwicklererfahrung, darunter:

• Verbessertes Self-Hosting: Neue Dokumentation und benutzerdefinierter Cache-Handler
• Turbopack-Verbesserungen: 5.600 bestandene Tests für next dev --turbo
• DX-Verbesserungen: Verbesserte Fehlermeldungen, Unterstützung für pushState und replaceState
• Parallele & abgefangene Routen: 20 Bugfixes basierend auf Ihrem Feedback
• next/image-Verbesserungen: Unterstützung für <picture>, Art Direction und Dark Mode

Aktualisieren Sie heute oder starten Sie mit:

npx create-next-app@latest

Verbessertes Self-Hosting

Wir haben Ihr Feedback zur besseren Klarheit beim Self-Hosting von Next.js mit einem Node.js-Server, Docker-Container oder statischem Export gehört. Wir haben unsere Self-Hosting-Dokumentation überarbeitet zu:

• Laufzeit-Umgebungsvariablen
• Benutzerdefinierte Cache-Konfiguration für ISR
• Benutzerdefinierte Bildoptimierung
• Middleware

Mit Next.js 14.1 haben wir auch die Bereitstellung benutzerdefinierter Cache-Handler für Incremental Static Regeneration und den granulareren Data Cache für den App Router stabilisiert:

module.exports = {
  cacheHandler: require.resolve('./cache-handler.js'),
  cacheMaxMemorySize: 0, // Standard-In-Memory-Caching deaktivieren
};

Diese Konfiguration ist beim Self-Hosting wichtig, insbesondere bei der Verwendung von Container-Orchestrierungsplattformen wie Kubernetes, wo jeder Pod eine Kopie des Caches hat. Ein benutzerdefinierter Cache-Handler stellt die Konsistenz über alle Pods hinweg sicher, die Ihre Next.js-Anwendung hosten.

Sie können die zwischengespeicherten Werte beispielsweise in Redis oder Memcached speichern. Wir möchten uns bei @neshca für ihren Redis-Cache-Handler-Adapter und das Beispiel bedanken.

Turbopack-Verbesserungen

Wir konzentrieren uns weiterhin auf die Zuverlässigkeit und Leistung der lokalen Next.js-Entwicklung:

• Zuverlässigkeit: Turbopack besteht den gesamten Next.js-Entwicklungstest und wird in Vercels Anwendungen eingesetzt
• Leistung: Verbesserte Initialkompilierungszeiten und Fast-Refresh-Zeiten von Turbopack
• Speicherverbrauch: Verbesserter Speicherverbrauch von Turbopack

Wir planen, next dev --turbo in einer zukünftigen Version zu stabilisieren, wobei es weiterhin optional bleibt.

Zuverlässigkeit

Next.js mit Turbopack besteht jetzt 5.600 Entwicklungstests (94%), 600 mehr seit dem letzten Update. Sie können den Fortschritt auf areweturboyet.com verfolgen.

Wir setzen next dev --turbo weiterhin in allen Next.js-Anwendungen von Vercel ein, einschließlich vercel.com und v0.dev. Alle Entwickler, die an diesen Anwendungen arbeiten, nutzen Turbopack täglich.

Wir haben mehrere Probleme für sehr große Next.js-Anwendungen mit Turbopack gefunden und behoben. Für diese Fixes haben wir neue Tests zu den bestehenden Entwicklungstest-Suites in Next.js hinzugefügt.

Leistung

Für vercel.com, eine große Next.js-Anwendung, haben wir folgendes festgestellt:

• Bis zu 76,7 % schnellere lokale Serverstartzeit
• Bis zu 96,3 % schnellere Code-Updates mit Fast Refresh
• Bis zu 45,8 % schnellere Initialkompilierung ohne Caching (Turbopack hat noch kein Disk-Caching)

In v0.dev identifizierten wir eine Möglichkeit, die Art und Weise zu optimieren, wie React Client Components in Turbopack entdeckt und gebündelt werden - was zu bis zu 61,5 % schnellerer Initialkompilierungszeit führte. Diese Leistungsverbesserung wurde auch in vercel.com beobachtet.

Zukünftige Verbesserungen

Turbopack verfügt derzeit über In-Memory-Caching, was die inkrementellen Kompilierungszeiten für Fast Refresh verbessert.

Der Cache wird jedoch derzeit nicht beibehalten, wenn der Next.js-Entwicklungsserver neu gestartet wird. Der nächste große Schritt für die Turbopack-Leistung ist Disk-Caching, das die Beibehaltung des Caches beim Neustart des Entwicklungsservers ermöglicht.

Verbesserungen der Entwicklererfahrung

Verbesserte Fehlermeldungen und Fast Refresh

Wir wissen, wie wichtig klare Fehlermeldungen für Ihre lokale Entwicklungserfahrung sind. Wir haben mehrere Fixes vorgenommen, um die Qualität der Stack Traces und Fehlermeldungen zu verbessern, die Sie bei der Ausführung von next dev sehen.

• Fehler, die zuvor Bundler-Fehler wie webpack-internal anzeigten, zeigen jetzt den Quellcode des Fehlers und die betroffene Datei korrekt an.
• Nachdem ein Fehler in einer Client-Komponente aufgetreten ist und Sie den Fehler in Ihrem Editor behoben haben, wurde der Fehlerbildschirm nicht gelöscht. Ein Hard-Reload war erforderlich. Wir haben mehrere dieser Fälle behoben. Zum Beispiel der Versuch, metadata aus einer Client-Komponente zu exportieren.

Hier ein Beispiel für eine frühere Fehlermeldung:

Ein Beispiel für einen Fehler aus einem fetch-Aufruf in Next.js 14.

Next.js 14.1 hat dies verbessert zu:

Fehler aus fetch-Aufrufen während des Renderings zeigen jetzt den Quellcode des Fehlers und die betroffene Datei an.

window.history.pushState und window.history.replaceState

Der App Router erlaubt jetzt die Verwendung der nativen Methoden pushState und replaceState, um den Browserverlauf zu aktualisieren, ohne die Seite neu zu laden.

pushState- und replaceState-Aufrufe integrieren sich in den Next.js App Router und ermöglichen die Synchronisation mit usePathname und useSearchParams.

Dies ist hilfreich, wenn Sie die URL sofort aktualisieren müssen, während Sie Zustände wie Filter, Sortierreihenfolge oder andere Informationen speichern, die über Neuladungen hinweg erhalten bleiben sollen.

'use client';
 
import { useSearchParams } from 'next/navigation';
 
export default function SortProducts() {
  const searchParams = useSearchParams();
 
  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set('sort', sortOrder);
    window.history.pushState(null, '', `?${params.toString()}`);
  }
 
  return (
    <>
      <button onClick={() => updateSorting('asc')}>Aufsteigend sortieren</button>
      <button onClick={() => updateSorting('desc')}>Absteigend sortieren</button>
    </>
  );
}

Erfahren Sie mehr über die Verwendung der nativen History API mit Next.js.

Data Cache Logging

Für eine verbesserte Beobachtbarkeit Ihrer zwischengespeicherten Daten in Ihrer Next.js-Anwendung während der Ausführung von next dev haben wir mehrere Verbesserungen an der logging-Konfigurationsoption vorgenommen.

Sie können nun anzeigen, ob ein Cache-HIT oder SKIP vorlag und die vollständige angeforderte URL:

GET / 200 in 48ms
 ✓ Compiled /fetch-cache in 117ms
 GET /fetch-cache 200 in 165ms
  │ GET https://api.vercel.app/products/1 200 in 14ms (cache: HIT)
 ✓ Compiled /fetch-no-store in 150ms
 GET /fetch-no-store 200 in 548ms
  │ GET https://api.vercel.app/products/1 200 in 345ms (cache: SKIP)
  │  │  Cache missed reason: (cache: no-store)

Dies kann über next.config.js aktiviert werden:

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

next/image-Unterstützung für <picture> und Art Direction

Die Next.js Image-Komponente unterstützt nun durch getImageProps() (stabil) erweiterte Anwendungsfälle, die keine direkte Verwendung von <Image> erfordern. Dazu gehören:

• Arbeiten mit background-image oder image-set
• Arbeiten mit Canvas context.drawImage() oder new Image()
• Arbeiten mit <picture>-Media-Queries zur Implementierung von Art Direction oder Light/Dark-Mode-Bildern

import { getImageProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImageProps({ ...common, src: '/dark.png' });
  const {
    props: { srcSet: light, ...rest },
  } = getImageProps({ ...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>
  );
}

Erfahren Sie mehr über getImageProps().

Parallele & Interceptierte Routen

In Next.js 14.1 haben wir 20 Verbesserungen an Parallelen & Interceptierten Routen vorgenommen.

In den letzten beiden Releases lag unser Fokus auf der Verbesserung der Leistung und Zuverlässigkeit von Next.js. Basierend auf Ihrem Feedback konnten wir nun viele Verbesserungen an Parallelen & Interceptierten Routen vornehmen. Besonders hervorzuheben ist die Unterstützung für Catch-All-Routen und Server Actions.

• Parallele Routen ermöglichen es Ihnen, eine oder mehrere Seiten gleichzeitig oder bedingt im selben Layout zu rendern. Für hochdynamische Bereiche einer App, wie Dashboards und Feeds in sozialen Netzwerken, können Parallele Routen verwendet werden, um komplexe Routing-Muster zu implementieren.
• Interceptierte Routen ermöglichen es Ihnen, eine Route aus einem anderen Teil Ihrer Anwendung innerhalb des aktuellen Layouts zu laden. Zum Beispiel können Sie beim Klicken auf ein Foto in einem Feed das Foto in einem Modal anzeigen, das den Feed überlagert. In diesem Fall fängt Next.js die Route /photo/123 ab, maskiert die URL und überlagert sie über /feed.

Erfahren Sie mehr über Parallele & Interceptierte Routen oder sehen Sie sich ein Beispiel an.

Weitere Verbesserungen

Seit 14.0 haben wir eine Reihe von hoch bewerteten Bugs aus der Community behoben.

Wir haben kürzlich auch Videos veröffentlicht, die Caching erklären und einige häufige Fehler mit dem App Router, die Ihnen helfen könnten.

• [Dokumentation] Neue Dokumentation zu Weiterleitungen
• [Dokumentation] Neue Dokumentation zu Tests
• [Dokumentation] Neue Dokumentation mit einer Checkliste für die Produktion
• [Feature] Hinzufügen der <GoogleAnalytics />-Komponente zu next/third-parties (Dokumentation)
• [Verbesserung] create-next-app ist jetzt kleiner und schneller zu installieren (PR)
• [Verbesserung] Verschachtelte Routen, die Fehler werfen, können weiterhin von global-error abgefangen werden (PR)
• [Verbesserung] redirect berücksichtigt nun basePath, wenn es in einer Server Action verwendet wird (PR)
• [Verbesserung] Behebung von next/script und beforeInteractive-Verwendung mit App Router (PR)
• [Verbesserung] Automatische Transpilierung von @aws-sdk und lodash für schnellere Routenstarts (PR)
• [Verbesserung] Behebung von Flashes ungestylter Inhalte mit next dev und next/font (PR)
• [Verbesserung] Weitergabe von notFound-Fehlern über die Fehlergrenze eines Segments hinaus (PR)
• [Verbesserung] Behebung der Bereitstellung öffentlicher Dateien von Locale-Domains mit Pages Router i18n (PR)
• [Verbesserung] Fehler, wenn ein ungültiger revalidate-Wert übergeben wird (PR)
• [Verbesserung] Behebung von Pfadproblemen auf Linux-Maschinen, wenn der Build unter Windows erstellt wurde (PR)
• [Verbesserung] Behebung von Fast Refresh / HMR bei Verwendung einer Multi-Zone-App mit basePath (PR)
• [Verbesserung] Verbesserung des Graceful Shutdown bei Terminierungssignalen (PR)
• [Verbesserung] Modal-Routen kollidieren bei Interception aus verschiedenen Routen (PR)
• [Verbesserung] Behebung von Intercepting-Routen bei Verwendung der basePath-Konfiguration (PR)
• [Verbesserung] Warnung anzeigen, wenn ein fehlender Parallel-Slot zu einem 404 führt (PR)
• [Verbesserung] Verbesserung von Intercepting-Routen bei Verwendung mit Catch-All-Routen (PR)
• [Verbesserung] Verbesserung von Intercepting-Routen bei Verwendung mit revalidatePath (PR)
• [Verbesserung] Behebung der Verwendung von @children-Slots mit Parallelen Routen (PR)
• [Verbesserung] Behebung von TypeError bei Verwendung von Params mit Parallelen Routen (PR)
• [Verbesserung] Behebung der Catch-All-Routen-Normalisierung für Standard-Parallel-Routen (PR)
• [Verbesserung] Behebung der Anzeige von Parallelen Routen in der next build-Zusammenfassung (PR)
• [Verbesserung] Behebung für Routenparameter bei Verwendung von Intercepting-Routen (PR)
• [Verbesserung] Verbesserung von tief verschachtelten Parallelen/Intercepting-Routen (PR)
• [Verbesserung] Behebung von 404 mit Intercepting-Routen in Kombination mit Routengruppen (PR)
• [Verbesserung] Behebung von Parallelen Routen mit Server Actions / Revalidierung des Router Caches (PR)
• [Verbesserung] Behebung der Verwendung von rewrites mit einer Intercepting-Route (PR)
• [Verbesserung] Server Actions funktionieren nun aus Drittanbieter-Bibliotheken (PR)
• [Verbesserung] Next.js kann nun innerhalb eines ESM-Pakets verwendet werden (PR)
• [Verbesserung] Barrel-File-Optimierungen für Bibliotheken wie Material UI (PR)
• [Verbesserung] Builds schlagen nun fehl bei falscher Verwendung von useSearchParams ohne Suspense (PR)

Mitwirkende

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

Dieses Release wurde ermöglicht durch:

• Das Next.js-Team: Andrew, Balazs, Jiachi, Jimmy, JJ, Josh, Sebastian, Shu, Steven, Tim, Wyatt, und Zack.
• Das Turbopack-Team: Donny, Leah, Maia, OJ, Tobias, und Will.
• Next.js Docs: Delba, Steph, Michael, und Lee.

Und die Beiträge von: @OlehDutchenko, @eps1lon, @ebidel, @janicklas-ralph, @JohnPhamous, @chentsulin, @akawalsky, @BlankParticle, @dvoytenko, @smaeda-ks, @kenji-webdev, @rv-david, @icyJoseph, @dijonmusters, @A7med3bdulBaset, @jenewland1999, @mknichel, @kdy1, @housseindjirdeh, @max-programming, @redbmk, @SSakibHossain10, @jamesmillerburgess, @minaelee, @officialrajdeepsingh, @LorisSigrist, @yesl-kim, @StevenKamwaza, @manovotny, @mcexit, @remcohaszing, @ryo-manba, @TranquilMarmot, @vinaykulk621, @haritssr, @divquan, @IgorVaryvoda, @LukeSchlangen, @RiskyMH, @ash2048, @ManuWeb3, @msgadi, @dhayab, @ShahriarKh, @jvandenaardweg, @DestroyerXyz, @SwitchBladeAK, @ianmacartney, @justinh00k, @tiborsaas, @ArianHamdi, @li-jia-nan, @aramikuto, @jquinc30, @samcx, @Haosik, @AkifumiSato, @arnabsen, @nfroidure, @clbn, @siddtheone, @zbauman3, @anthonyshew, @alexfradiani, @CalebBarnes, @adk96r, @pacexy, @hichemfantar, @michaldudak, @redonkulus, @k-taro56, @mhughdo, @tknickman, @shumakmanohar, @vordgi, @hamirmahal, @gaspar09, @JCharante, @sjoerdvanBommel, @mass2527, @N-Ziermann, @tordans, @davidthorand, @rmathew8-gh, @chriskrogh, @shogunsea, @auipga, @SukkaW, @agustints, @OXXD, @clarencepenz, @better-salmon, @808vita, @coltonehrman, @tksst, @hugo-syn, @JakobJingleheimer, @Willem-Jaap, @brandonnorsworthy, @jaehunn, @jridgewell, @gtjamesa, @mugi-uno, @kentobento, @vivianyentran, @empflow, @samennis1, @mkcy3, @suhaotian, @imevanc, @d3lm, @amannn, @hallatore, @Dylan700, @mpsq, @mdio, @christianvuerings, @karlhorky, @simonhaenisch, @olci34, @zce, @LavaToaster, @rishabhpoddar, @jirihofman, @codercor, @devjiwonchoi, @JackieLi565, @thoushif, @pkellner, @jpfifer, @quisido, @tomfa, @raphaelbadia, @j9141997, @hongaar, @MadCcc, @luismulinari, @dumb-programmer, @nonoakij, @franky47, @robbertstevens, @bryndyment, @marcosmartini, @functino, @Anisi, @AdonisAgelis, @seangray-dev, @prkagrawal, @heloineto, @kn327, @ihommani, @MrNiceRicee, @falsepopsky, @thomasballinger, @tmilewski, @Vadman97, @dnhn, @RodrigoTomeES, @sadikkuzu, @gffuma, @Schniz, @joulev, @Athrun-Judah, @rasvanjaya21, @rashidul0405, @nguyenbry, @Mwimwii, @molebox, @mrr11k, @philwolstenholme, @IgorKowalczyk, @Zoe-Bot, @HanCiHu, @JackHowa, @goncy, @hirotomoyamada, @pveyes, @yeskunall, @ChendayUP, @hmaesta, @ajz003, @its-kunal, @joelhooks, @blurrah, @tariknh, @Vinlock, @Nayeem-XTREME, @aziyatali, @aspehler, und @moka-ayumu.