BackZurück zum Blog

Next.js 15.2

Next.js 15.2 beinhaltet Updates für das Debugging von Fehlern, Metadaten, Turbopack und mehr.

Next.js 15.2 enthält Updates für das Debugging von Fehlern, Metadaten, Turbopack und mehr:

Aktualisieren Sie heute oder starten Sie mit:

Terminal
# Verwenden Sie die automatisierte Upgrade-CLI
npx @next/codemod@canary upgrade latest
 
# ...oder aktualisieren Sie manuell
npm install next@latest react@latest react-dom@latest
 
# ...oder starten Sie ein neues Projekt
npx create-next-app@latest

Überarbeitete Fehler-UI und verbesserte Stack Traces

Wir haben sowohl visuelle als auch qualitative Verbesserungen an Fehlern vorgenommen, die Ihnen beim Entwickeln Ihrer Anwendung begegnen können. Gehen wir die einzelnen Verbesserungsbereiche durch:

Fehler-Overlay

Ein Beispiel des Next.js-Fehler-Overlays nach Version 15.2

Wir haben die UI und Darstellung von Fehlermeldungen in Next.js komplett überarbeitet, um sie verständlicher zu machen. Das neue Design hebt die wesentlichen Details des Fehlers hervor – wie die Nachricht, den relevanten Code-Ausschnitt und den Aufrufstack – während Code aus Bibliotheken oder Abhängigkeiten reduziert wird. So können Sie schneller zur Ursache des Problems vordringen und mit der Behebung beginnen.

Durch die Nutzung der neu eingeführten Owner Stacks-Funktion in React können wir nun genauer anzeigen, woher Ihre Fehler stammen. Next.js zeigt nun die Unterkomponente an, die den Fehler verursacht hat, und überspringt Zwischenelemente, die nicht für das fehlerhafte Element verantwortlich waren.

Wir machen es auch einfacher, Ihre Indikator-Einstellungen anzupassen, ohne zusätzliche Konfiguration vornehmen zu müssen.

Ein Beispiel der Next.js-Entwicklertools-Einstellungen

Wir haben einen Feedback-Bereich am unteren Rand der Fehler-Overlays hinzugefügt, in dem Sie bewerten können, wie hilfreich die Fehlermeldung war. Ihre Meinung hilft uns, häufige Schmerzpunkte zu verstehen und Fehlermeldungen zu verbessern, um das Debugging zu erleichtern.

Entwicklungsindikator

Die verschiedenen Zustände des Entwicklungsindikators, vom Rendering bis zur Anzeige zusätzlicher Informationen.

Wir haben Entwicklungsinformationen in einem neuen, schlanken Indikator zusammengefasst, der Details wie den Rendering-Modus und den Build-Status anzeigt.

Während der Kompilierung sehen Sie ein gedimmtes, animiertes Next.js-Logo beim Navigieren zwischen Routen. Das Logo wird heller, sobald die Kompilierung abgeschlossen ist und React mit dem Rendering beginnt, was einen visuellen Hinweis auf den Zustand Ihrer Anwendung gibt.

Das Öffnen des Entwicklungsindikators zeigt nun:

  • Den Rendering-Modus der aktuellen Route (statisch/dynamisch)
  • Den Turbopack-Kompilierungsstatus
  • Aktive Fehler mit schnellem Zugriff auf das Fehler-Overlay

Zukünftige Updates werden dieses Menü um folgende Punkte erweitern:

  • PPR (Partial Prerendering)-Debugging-Tools
  • Cache-Überwachungsfunktionen
  • Zusätzliche Entwicklertools

Dieser einheitliche Ansatz bündelt alle wichtigen Entwicklungsinformationen an einem zugänglichen Ort. Wir werden dieses Feature in zukünftigen Releases basierend auf Ihrem Feedback weiter verfeinern und erweitern.

Streaming-Metadaten

Oft ist es notwendig, dynamische Daten abzurufen oder asynchrone Operationen in generateMetadata durchzuführen. In früheren Versionen von Next.js mussten diese Metadaten fertig generiert sein, bevor die initiale UI gesendet werden konnte, damit sie im <head>-Abschnitt des Dokuments enthalten waren.

Das bedeutete, dass für viele Seiten, bei denen eine schnelle initiale UI verfügbar war, das erste Rendering durch Datenanforderungen verzögert wurde, die nicht beeinflussten, was der Benutzer visuell sehen würde. In Version 15.2 haben wir dies verbessert, indem die initiale UI nun an den Browser gesendet werden kann, noch bevor generateMetadata abgeschlossen ist.

Ein Beispiel der Next.js-Entwicklertools-Einstellungen

Um jedoch die Kompatibilität mit Bots und Crawlern zu gewährleisten, die Metadaten im <head>-Abschnitt des Dokuments erwarten, verzögern wir weiterhin das Senden von HTML an bestimmte Bot-User-Agents. Wenn Sie eine feinere Kontrolle darüber benötigen, welche Bots diese Behandlung erhalten, können Sie die verwendete Regex über die Option htmlLimitedBots in next.config.js anpassen.

Erfahren Sie mehr über Streaming-Metadaten.

Turbopack-Leistungsverbesserungen

Turbopack wurde mit Next.js 15 als stabil markiert.

Wir haben an der Verbesserung der Leistung von Turbopack gearbeitet, insbesondere in Szenarien ohne persistentes Caching. Als Teil dieses Releases haben wir folgende Verbesserungen eingeführt:

  • Schnellere Kompilierungszeiten: Frühe Nutzer berichten von bis zu 57,6 % schnelleren Kompilierungszeiten beim Zugriff auf Routen im Vergleich zu Next.js 15.1.
  • Reduzierter Speicherverbrauch: Für die vercel.com-Anwendung haben wir eine 30 %-ige Reduzierung des Speicherverbrauchs während der lokalen Entwicklung beobachtet.

Mit diesen Verbesserungen sollte Turbopack nun in praktisch allen Fällen schneller als Webpack sein. Wenn Sie ein Szenario finden, in dem dies für Ihre Anwendung nicht zutrifft, melden Sie sich bitte – wir möchten dies untersuchen.

Wir haben auch Fortschritte bei persistentem Caching und Produktions-Builds gemacht. Obwohl diese Features noch nicht für eine experimentelle Veröffentlichung bereit sind, haben wir begonnen, sie an realen Projekten zu testen. Wir werden detailliertere Metriken teilen, sobald sie für eine breitere Nutzung verfügbar sind.

React View Transitions (experimentell)

Wir haben ein Feature-Flag hinzugefügt, um die neue experimentelle View Transitions API in React zu aktivieren. Diese neue API ermöglicht es Ihnen, Animationen zwischen verschiedenen Ansichten und Komponenten in Ihrer Anwendung zu erstellen.

Um dieses Feature zu aktivieren, fügen Sie Folgendes zu Ihrer next.config.js hinzu:

next.config.js
module.exports = {
  experimental: {
    viewTransition: true,
  },
};

Hinweis: Dieses Feature ist hochgradig experimentell und kann in zukünftigen Releases Änderungen unterliegen.

Weitere Informationen zur Verwendung dieses Features finden Sie im ursprünglichen View Transition Pull Request im React-Repository. Diese Arbeit baut auf der nativen Browser-Implementierung von View Transitions auf.

Wir werden weitere Dokumentation und Beispiele veröffentlichen, sobald die Stabilität fortschreitet.

Node.js Middleware (experimentell)

Wir haben an einem neuen experimentellen Flag gearbeitet, das die Verwendung der Node.js-Laufzeitumgebung für die Next.js Middleware ermöglicht.

Um dieses Feature zu aktivieren, fügen Sie Folgendes zu Ihrer next.config.js hinzu:

next.config.js
module.exports = {
  experimental: {
    nodeMiddleware: true,
  },
};

Sie können dann die Node.js-Laufzeitumgebung in Ihrem Middleware-config-Export angeben:

middleware.js
import bcrypt from 'bcrypt';
 
const API_KEY_HASH = process.env.API_KEY_HASH; // Vorab gehashte API-Schlüssel in der Umgebung
 
export default async function middleware(req) {
  const apiKey = req.headers.get('x-api-key');
 
  if (!apiKey || !(await bcrypt.compare(apiKey, API_KEY_HASH))) {
    return new Response('Forbidden', { status: 403 });
  }
 
  console.log('API-Schlüssel validiert');
}
 
export const config = {
  runtime: 'nodejs',
};

Hinweis: Dieses Feature wird für den Produktionseinsatz noch nicht empfohlen. Daher wirft Next.js einen Fehler, es sei denn, Sie verwenden die next@canary-Version anstelle der stabilen Version.

Wir planen, diese Gelegenheit zu nutzen, um die Middleware-API zu verbessern und umzugestalten. Wenn Sie Vorschläge oder Wünsche haben, lassen Sie es uns wissen. Node.js Middleware war eine der wichtigsten Community-Anfragen, und wir freuen uns, dies umgesetzt zu haben.

Kommende Features

  • "use cache" (Beta): Wir haben daran gearbeitet, "use cache" als eigenständiges Feature zu stabilisieren. Bleiben Sie dran für weitere Details in den kommenden Releases. Erfahren Sie mehr über "use cache".
  • Turbopack persistentes Caching (experimentell): Wir haben persistentes Caching bei Vercel intern mit positiven Leistungsverbesserungen getestet. Sobald wir es weiter stabilisiert haben, werden wir es hinter einem Feature-Flag für zusätzliches Feedback und Tests freigeben.

Weitere Änderungen

  • [Feature] Hinzufügen des --api-Flags zur Erstellung einer headless API-only-Anwendung mit create-next-app (PR)
  • [Feature] Unterstützung für images.qualities mit next/image hinzugefügt (PR)
  • [Deprecation] Warnung zur i18n-Konfigurations-Deprecation im App Router (PR)
  • [Verbesserung] Verbesserte Lint-Leistung von no-html-link-for-pages (PR)
  • [Verbesserung] Build-Fehlerausgabe, wenn die "use action"-Direktive falsch verwendet wird (PR)
  • [Verbesserung] Anzeige von global-error neben dem Dev-Overlay während der Entwicklung (PR)
  • [Verbesserung] Möglichkeit zum Deaktivieren von HTTP-Request-Logs im Entwicklungsserver (PR)
  • [Verbesserung] Hinzufügen von Pagination-SEO-Link-Tags (PR)
  • [Verbesserung] Verbesserte JSDocs für metadata und <Link>-Komponenten (PR)
  • [Verbesserung] Middleware sollte next/image-Requests matchen (PR)
  • [Verbesserung] Hostname zur Standard-Fehler-Boundary-Nachricht hinzugefügt (PR)
  • [Verbesserung] Nicht von expliziten Error Boundaries behandelte Fehler werden über reportError gesendet (PR)

Mitwirkende

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

Ein großer Dank geht an @mischnic, @Marukome0743, @JamBalaya56562, @creationix, @noreiller, @styfle, @abdonrd, @ollyw, @aymericzip, @davidhu2000, @attilarepka, @devpla, @dydals3440, @huozhi, @wbinnssmith, @suu3, @PapatMayuri, @Sahil4883, @abyii, @molebox, @sokra, @maciej-ka, @abvthecity, @damiensedgwick, @alitas, @RiskyMH, @ytreister, @sommeeeer, @n1ckoates, @yongholeeme, @spidersouris, @gurkerl83, @cassiossantos, @Netail, @tknickman, @eur00t, @cseas, @nnnnoel, @Manoj-M-S, @lfades, @matmannion, @mikeboensel, @nphmuller, @apostolos, @k15a, @pavelee, @locothedev, @vexcat, @Zach-Jaensch, @decepulis, @gadcam, @lukahartwig, @jsanford8, @RobinMalfait, @raunofreiberg, @mohsen1, @skushagra, @amannn, @HQidea, @jrandolf, @smit-err, @littledivy, @k35o, @martinsione, @CvX, @msereniti, @Timer, @Iftee97, @chibicode, @RobPruzan, @PlagueFPS, @bjunix, @maximevtush, @michaelven, @sedlukha, @johannpinson, @AxelUser, @Nayeem-XTREME, @IcaroG, @blurrah, @lachlanjc, @ashi009, @conico974, @raphaelcosta, @dulmandakh, @khuezy, @Knoa0405, @wangsijie, @stefanprobst, @wentsul, @loopy-lim, @bratvanov, @hedgeday, und @cassian-goode für ihre Hilfe!