BackZurück zum Blog

Next.js 15.3

Next.js 15.3 enthält Turbopack für Builds, neue Client-Instrumentierung und Navigations-Hooks sowie weitere Verbesserungen.

Next.js 15.3 enthält Turbopack für Builds, neue Client-Instrumentierung und Navigations-Hooks sowie weitere Verbesserungen:

Aktualisieren Sie jetzt oder starten Sie mit:

Terminal
# Automatisierte Upgrade-CLI verwenden
npx @next/codemod@canary upgrade latest
 
# ...oder manuell aktualisieren
npm install next@latest react@latest react-dom@latest
 
# ...oder neues Projekt starten
npx create-next-app@latest

Turbopack Builds (Alpha)

Nach der stabilen Veröffentlichung von next dev --turbopack verwenden über 50% der Entwicklungssitzungen in Next.js 15 nun Turbopack.

Diese Version enthält unsere Alpha-Veröffentlichung von next build --turbopack, die die gleichen Leistungsverbesserungen aus der lokalen Entwicklung in Produktions-Builds bringt.

Testen Sie Turbopack für Produktions-Builds durch Aktualisierung auf 15.3 und Ausführen von:

Terminal
next build --turbopack

Funktionalität

99,3% der Integrationstests für next build werden bereits bestanden. Sie können unseren Fortschritt zu 100% unter areweturboyet.com verfolgen. Wenn Ihre Anwendung bereits mit Turbopack für dev funktioniert, sollte sie auch mit build funktionieren.

Turbopack-Builds sind in der Alpha-Phase. Wir empfehlen derzeit nicht, sie in Produktionsumgebungen für geschäftskritische Anwendungen einzusetzen. Testen Sie sie stattdessen in einer Preview- oder Staging-Umgebung oder führen Sie den Build lokal aus, um Unterschiede in Bundle-Größe und Leistung zu beobachten.

Wir arbeiten aktiv daran, diese Leistungslücken durch Scope Hoisting, verbessertes Chunking und andere Optimierungen zu schließen.

Build-Leistung

Wir haben Turbopack in Vercels großem internem Monorepo und frühen Partner-Codebasen validiert. Ein Vorteil von Turbopacks Architektur gegenüber unserer vorherigen Webpack-Implementierung ist, dass die Leistung mit zusätzlichen CPU-Kernen skaliert:

  • Mit 4 Kernen: 28% schneller als Webpack
  • Mit 16 Kernen: 60% schneller als Webpack
  • Mit 30 Kernen: 83% schneller als Webpack

Diese Build-Zeiten sinken noch weiter mit unserer experimentellen Arbeit an persistenter Caching. Wir werden dazu in einer zukünftigen Version mehr teilen.

Ökosystem

Wir arbeiten mit häufig verwendeten Integrationen wie Sentry zusammen, um sicherzustellen, dass sie mit next build --turbopack kompatibel sind, bevor die stabile Version erscheint. Bitte kontaktieren Sie @leerob auf X, wenn Sie ein Tool-Autor sind und mit uns an der Kompatibilität arbeiten möchten.

Feedback

Bitte teilen Sie Ihr Feedback, auch wenn alles reibungslos läuft, um uns bei der Vorbereitung einer stabilen Version zu helfen:

Turbopack-Konfiguration in next.config.ts (stabil)

Die Turbopack-Konfiguration in next.config.ts wurde von experimental.turbo auf die oberste Ebene turbopack verschoben:

next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
};
 
export default nextConfig;

Aus Kompatibilitätsgründen wird die Option experimental.turbo bis zum nächsten Major-Release von Next.js weiter unterstützt.

Eine vollständige Liste der Turbopack-Konfigurationsoptionen finden Sie in der Turbopack API-Referenz.

Community-Unterstützung für Rspack (experimentell)

Das Rspack-Team hat ein Community-Plugin für Next.js erstellt.

Dies bietet Next.js-Nutzern, die nahezu exakte Webpack-API-Kompatibilität benötigen, aber noch nicht zu Turbopack wechseln können, eine Option zur Verbesserung ihrer lokalen Kompilierungs- und Build-Zeiten. Wir sind zuversichtlich in unseren Fortschritten mit Turbopack und werden weiterhin einen schrittweisen Weg für Webpack-Nutzer bieten.

Obwohl dies kein offizielles Next.js-Plugin ist, arbeiten wir mit dem Rspack-Team zusammen. Beide Teams werden an gemeinsamen Grundlagen wie SWC und Lightning CSS arbeiten, was allen Next.js-Nutzern und dem breiteren Ökosystem zugutekommt.

Wenn Sie Rspack mit Next.js ausprobieren möchten, können Sie den next-rspack-Adapter verwenden. Wir führen den Adapter gegen unser Integrationstest-Suite aus. Derzeit werden ~96% der Tests bestanden.

Beispiel ansehen oder mehr in den Rspack-Dokumenten erfahren.

Client-Instrumentierung-Hook

Die Datei instrumentation-client.js|ts ermöglicht es Ihnen, Monitoring- und Analytics-Code hinzuzufügen, der ausgeführt wird, bevor der Frontend-Code Ihrer Anwendung startet.

Dies ist ideal für das Einrichten von Performance-Tracking, Fehlerüberwachung oder anderen Client-seitigen Observability-Tools so früh wie möglich im Lebenszyklus.

instrumentation-client.js
// Performance-Monitoring einrichten
performance.mark('app-init');
 
// Analytics initialisieren
console.log('Analytics initialisiert');
 
// Fehler-Tracking einrichten
window.addEventListener('error', (event) => {
  // An Ihren Fehler-Tracking-Service senden
  reportError(event.error);
});

Platzieren Sie diese Datei im Stammverzeichnis Ihres Projekts ähnlich wie Server-seitige Instrumentierung.

Mehr erfahren in der instrumentation-client-Dokumentation.

Wir führen neue Navigations-Hooks ein, die die Client-seitigen Routing-Fähigkeiten in Next.js 15.3 erweitern und Ihnen die Entwicklung lokalisierter Ladezustände und die Implementierung komplexer Steuerungen wie Navigationsabbruch erleichtern.

onNavigate

Dieser Event-Handler ist eine neue Eigenschaft der Link-Komponente und wird während Client-seitiger Navigationen ausgeführt, wodurch Sie präzise Kontrolle über das Routing-Verhalten Ihrer Anwendung erhalten.

Im Gegensatz zum onClick-Event, das bei allen Klicks ausgelöst wird, kann onNavigate für Single-Page-App (SPA)-Navigationen verwendet werden, wodurch Sie Code ausführen oder sogar die Navigation mit preventDefault() abbrechen können.

Diese API kann verwendet werden, um Übergangsanimationen, Navigationswächter oder Analytics-Tracking zu implementieren, das nur während tatsächlicher Seitenübergänge ausgeführt werden soll.

Mehr erfahren in der onNavigate-Dokumentation.

useLinkStatus

Der useLinkStatus-Client-Component-Hook gibt einen pending-Boolean zurück, der anzeigt, wann eine Navigation im Gange ist, und Ihnen lokalisierte Kontrolle über Ladezustände gibt.

Diese API ist nach useFormStatus von React modelliert und hilfreich für das Hinzufügen benutzerdefinierter Ladeindikatoren während Seitenübergängen, insbesondere wenn Prefetching deaktiviert ist oder wenn Ihre verlinkten Routen keine dedizierten Ladezustände haben.

Indem Sie eine Komponente, die useLinkStatus verwendet, als Nachkomme Ihrer <Link>-Komponente platzieren, können Sie responsive UI-Elemente erstellen, die in Echtzeit auf Navigationsereignisse reagieren.

Mehr erfahren in der useLinkStatus-Dokumentation.

TypeScript-Plugin-Leistungsverbesserungen

Das Next.js TypeScript Language Server Plugin (LSP) ist jetzt schneller.

Das LSP bietet Inline-Intellisense-Funktionen wie Server/Client-Grenzvalidierung, Komponenten-Prop-Hinweise, Konfigurationsautovervollständigung und Fehlererkennung für nicht erlaubte APIs in React Server Components. In sehr großen Codebasen konnte das Plugin zuvor den TypeScript Language Service zum Hängen oder Abstürzen bringen.

Wir haben erhebliche Leistungsverbesserungen vorgenommen, um diese Probleme zu beheben. In unseren internen Tests haben sich die Antwortzeiten des Plugins um ~60% verbessert, ohne Einfrieren oder Abstürze.

Weitere Änderungen

  • [Feature] Unterstützung für new URL() in images.remotePatterns (#77692)
  • [Feature] Viewport-Optionen sind jetzt von metadata getrennt (#77427)
  • [Feature] unstable_dynamicOnHover-Option hinzugefügt (#77866)
  • [Feature] Unterstützung für Pinterest Rich Pins hinzugefügt (#76988)
  • [Verbesserung] revalidate funktioniert nun bei Weiterleitungen in Route Handlern (#77090)
  • [Verbesserung] Konsistenz nach revalidate in Server Actions sichergestellt (#76885)
  • [Verbesserung] Upgrade von sharp für schnellere PNG-zu-AVIF-Konvertierung (#77839)

Mitwirkende

Next.js ist das Ergebnis der gemeinsamen Arbeit von über 3.000 einzelnen Entwicklern. Diese Version wurde ermöglicht durch:

Großer Dank an @raunofreiberg, @huozhi, @ijjk, @timneutkens, @gaojude, @leerob, @mezotv, @bgw, @samcx, @ztanner, @sokra, @mischnic, @wbinnssmith, @kdy1, @unstubbable, @ahabhgk, @ScriptedAlchemy, @SukkaW, @wyattjoh, @eps1lon, @Amirroid, @Netail, @lubieowoce, @gnoff, @jackwilson323, @acdlite, @sbougerel, @kevva, @kasperpeulen, @Cy-Tek, @dvoytenko, @husseinraoouf, @isBatak, @iamkd, @delbaoliveira, @jantimon, @padmaia, @Bernardoow, @styfle, @devjiwonchoi, @JamBalaya56562 und @Marukome0743 für die Hilfe!