Next.js App Router Update

Der App Router stellt eine neue Grundlage für die Zukunft von Next.js dar, aber wir erkennen, dass es Möglichkeiten gibt, die Erfahrung zu verbessern. Wir möchten ein Update zu unseren aktuellen Prioritäten geben.

Für die kommenden Releases von Next.js konzentrieren wir uns auf folgende Bereiche:

• Verbesserung der Leistung
• Verbesserung der Stabilität
• Verbesserung der Entwicklerbildung

Der App Router

Zunächst ist es hilfreich, etwas Kontext zur Gestaltung des App Routers zu geben.

Über den Pages Router hinauswachsen durch Ausrichtung an React

Mit zunehmender Verbreitung und größeren Anwendungen, die mit Next.js gebaut wurden, erhielten wir Feedback aus der Community und identifizierten Bereiche, in denen wir an die Grenzen des Pages Routers stießen.

Besonders hervorzuheben ist, dass der Next.js Pages Router nicht für Streaming konzipiert war, eine grundlegende Funktion im modernen React, die uns hilft, die bestehenden Einschränkungen zu überwinden und unsere langfristige Vision für Next.js zu verwirklichen.

Die Entwicklung von Streaming-freundlichen Framework-APIs für Datenabruf, Asset-Ladung und Seitenmetadaten sowie die Nutzung neuerer React-Primitive erforderten umfangreiche Änderungen an der Kernarchitektur von Next.js.

Wir nutzten die Gelegenheit, auf den neuesten React Concurrent Features aufzubauen, wie Server Components, Suspense und mehr, die für Streaming-Architekturen entwickelt wurden.

Inkrementelle Adoption ist nicht verhandelbar

Wir wollten nicht, dass unsere Community ihre gesamten Anwendungen von Grund auf neu aufbauen muss, um auf die neueste Version von Next.js zu aktualisieren. Wir glauben, dass inkrementelle Adoption die beste Strategie für die schrittweise Entwicklung von Anwendungen ist.

• Inkrementelle Migration pro Route: Ohne eine umfassende Neuentwicklung Ihrer Anwendung können Sie eine einzelne Route Ihrer Anwendung auf den App Router umstellen und neue Funktionen in Ihrem eigenen Tempo nutzen. Siehe unseren Leitfaden zur inkrementellen Adoption oder sehen Sie sich ein Tutorial an.
• Einfaches Zurücksetzen: Wenn Sie mit der Leistung oder Entwicklererfahrung des App Routers nicht zufrieden sind, können Sie problemlos für diese spezifische Route zum Pages Router zurückkehren.

Wir untersuchen weitere Möglichkeiten, um die inkrementelle Adoption noch einfacher zu gestalten.

Weg zur Stabilität

Wir begannen vor über einem Jahr mit dem Aufbau des Next.js App Routers und haben seitdem kontinuierlich neue Funktionen und Verbesserungen veröffentlicht.

• Erste Ankündigung: Im Mai dieses Jahres veröffentlichten wir einen RFC, um unsere Pläne für flexiblere Routing- und Layout-Optionen zu skizzieren.
• Frühe Beta: In Next.js 13 veröffentlichten wir die erste Version des App Routers, die es der Community ermöglichte, ihn auszuprobieren und frühzeitiges Feedback zu geben.
• Stabile API: Als Reaktion auf das Feedback konzentrierten wir uns darauf, die Kern-API fertigzustellen. In Version 13.4 erklärten wir die Kern-API des App Routers als stabil und bereit für eine breitere Nutzung.

Unser aktueller Fokus

Die Markierung der Stabilität signalisierte der Community, dass die Kern-API festgelegt war und keine größeren Breaking Changes mehr durchlaufen würde, die Neuentwicklungen erfordern würden.

Seitdem haben wir viel wertvolles Feedback erhalten, und die zunehmende Nutzung hat unweigerlich Bugs und Möglichkeiten für weitere Verbesserungen aufgedeckt.

Wir möchten Ihnen mitteilen, dass wir noch nicht zufrieden mit der Nutzungserfahrung des App Routers sind und dies unsere oberste Priorität für die Zukunft ist. Lassen Sie uns also über die Arbeit sprechen, die wir leisten, um diese Erfahrung zu verbessern.

Verbesserung der Leistung

In den kommenden Monaten konzentrieren wir uns auf drei Aspekte der Leistung: lokale Iterationsgeschwindigkeit, Produktions-Build-Zeiten und Serverless-Leistung.

Leistung bei der lokalen Entwicklung

Da Next.js gereift ist und die Größe der damit gebauten Anwendungen gewachsen ist, haben wir schrittweise Teile der zugrunde liegenden Architektur durch schnellere, skalierbarere Tools ersetzt.

• Fortschritt der Migration: Wir begannen mit dem Ersatz von Babel (Kompilierung) und Terser (Minifizierung) durch SWC. Dies hat dazu beigetragen, die lokale Iterationsgeschwindigkeit und die Produktions-Build-Zeiten zu verbessern.

• Langfristige Investition: Eine hervorragende Fast-Refresh-Leistung unabhängig von der Größe der Anwendung zu erhalten, bedeutet, Next.js während der lokalen Entwicklung so inkrementell wie möglich zu gestalten, indem nur der benötigte Code gebündelt und kompiliert wird.

  Deshalb arbeiten wir derzeit daran, webpack (Bündelung) durch Turbopack zu ersetzen, das auf einer Low-Level-Inkremental-Engine basiert, die Caching bis auf die Ebene einzelner Funktionen ermöglicht.

  Next.js-Anwendungen, die auf Turbopack umsteigen, werden auch bei wachsender Größe eine kontinuierliche Verbesserung der Fast-Refresh-Geschwindigkeit feststellen.

  In den letzten Monaten hat sich das Turbo-Team auf die Verbesserung der Turbopack-Leistung und die Unterstützung aller Next.js-Funktionen und App-Router-APIs konzentriert.

  Turbopack ist derzeit als Beta verfügbar (next dev --turbo).

• Verbesserung der aktuellen Architektur: Neben der Investition in die Zukunft arbeiten wir weiter an Leistungsverbesserungen für unsere bestehende webpack-Architektur.

  Bei bestimmten Next.js-Anwendungen, insbesondere solchen, die Tausende von Modulen aktualisieren, haben wir Berichte über Unzuverlässigkeiten bei der lokalen Entwicklung und Fast Refresh erhalten. Wir arbeiten daran, die Leistung und Zuverlässigkeit hier zu verbessern. Beispielsweise haben wir kürzlich vorkonfigurierte Einstellungen (modularizeImports) hinzugefügt, um große Icon-Bibliotheken zu handhaben, die versehentlich Tausende von Modulen bei jeder Anfrage neu laden könnten.

Build-Zeit-Leistung

Wir arbeiten auch an Produktions-Builds mit Turbopack (next build --turbo) und haben erste Teile dieser Arbeit veröffentlicht. Erwarten Sie weitere Updates dazu in den kommenden Releases.

Produktionsleistung

Schließlich arbeiten wir bei Vercel daran, die Leistung und Speichernutzung von Vercel Functions zu optimieren, die durch Next.js-Anwendungscode definiert sind, um minimale Cold Starts bei gleichzeitiger Beibehaltung der Vorteile einer skalierbaren Serverless-Architektur zu gewährleisten. Diese Arbeit hat zu neuen Tracing-Fähigkeiten (experimentell) in Next.js und frühen Erkundungen von serverseitigen Entwicklertools geführt.

Verbesserung der Stabilität

Der Pages Router existiert seit sechs Jahren. Die Veröffentlichung des App Routers bedeutete die Einführung neuer APIs, die noch jung sind, mit nur sechs Monaten Nutzung. Wir haben in kurzer Zeit viel erreicht, aber es gibt noch Möglichkeiten zur Verbesserung, während wir mehr von unserer Community und deren Nutzung lernen.

Wir schätzen die Bereitschaft der Community, den App Router eifrig zu nutzen und Feedback zu geben. Es gab eine Reihe von Bug-Reports, die wir untersuchen, und wir sind dankbar für die minimalen Reproduktionen, die Sie erstellt haben, um Probleme zu isolieren und Fixes zu verifizieren.

Seit Version 13.4 haben wir bereits eine Reihe von hochwirksamen Stabilitäts-Bugs gepatcht, die in der neuesten Patch-Version (13.4.7) verfügbar sind. Wir werden uns weiterhin mit hoher Intensität auf Leistung und Stabilität konzentrieren.

Verbesserung der Entwicklerbildung

Während wir glauben, dass die neuen Funktionen des App Routers und des modernen React leistungsstark sind, erfordern sie auch zusätzliche Schulung und Dokumentation, um diese neuen Konzepte zu vermitteln.

Next.js-Funktionen

Wir haben im letzten Jahr daran gearbeitet, die Next.js-Dokumentation von Grund auf neu zu schreiben. Diese Arbeit ist jetzt auf nextjs.org/docs live. Wir möchten einige wichtige Teile hervorheben:

• Pages und App Umschalter: Sie können zwischen der Dokumentation für den Pages Router oder den App Router wechseln, indem Sie die Schaltfläche auf der linken Seite der Dokumentation verwenden. Darüber hinaus können Sie Suchergebnisse basierend auf Ihrer Router-Wahl filtern.
• Verbesserter Inhalt und Informationsarchitektur: Fast jede Seite der App-Router-Dokumentation wurde überarbeitet, einschließlich einer klareren Struktur und Kohärenz zwischen den Seiten sowie Hunderten von neuen Illustrationen, um visuell zu erklären, wie Next.js funktioniert.
• Mehr kommt noch: Wir haben hier noch mehr Arbeit vor uns. Das Developer-Experience-Team bei Vercel arbeitet hart daran, zusätzliche Lernressourcen bereitzustellen (einschließlich eines aktualisierten Kurses auf /learn, der den App Router lehrt) und Beispiele aus realen Codebasen (einschließlich einer Neuentwicklung von Next.js Commerce).

Wir werden neue Inhalte in der Dokumentation, auf Twitter, YouTube und mehr veröffentlichen.

Neue React-Funktionen

Wir haben auch Ihr Feedback zur Schulung über neue React-Funktionen gehört, die im Next.js App Router verfügbar sind.

• Server Components: Es ist wichtig zu beachten, dass Funktionen wie Server Components und Konventionen wie die "use client"-Direktive nicht Next.js-spezifisch sind, sondern Teil des größeren React-Ökosystems.

  Unser Team, unsere Partner bei Meta und andere unabhängige Mitwirkende arbeiten daran, mehr Schulungen zu diesen Themen bereitzustellen. Es sind frühe Tage für diese Konzepte, aber wir vertrauen auf das React-Ökosystem und fortlaufende Schulungen.

• Client Components: Mit der aktuellen Diskussion über Server Components ist es wichtig zu beachten, dass Client Components keine De-Optimierung darstellen. Der Client ist ein gültiger Teil des React-Modells und wird nicht verschwinden.

  Sie können sich Client Components als das bestehende Next.js-Ökosystem vorstellen, in dem Ihre bevorzugten Bibliotheken und Tools weiterhin funktionieren. Eine häufige Frage, die wir gesehen haben, ist, ob "use client" zu jeder einzelnen Datei hinzugefügt werden muss, um sie zu einer Client-Komponente zu machen. Dies ist nicht notwendig, aber wir verstehen, dass diese Konzepte neu sind und Zeit zum Lernen benötigen. Sie müssen nur die oberste Grenze markieren, an der Ihr Code vom Server zum Client wechselt. Diese Architektur ermöglicht es Ihnen, Server- und Client-Komponenten miteinander zu verweben.

• Wachsendes Drittanbieter-Ökosystem: Neben der Schulung wächst das Ökosystem um die neueren React-Funktionen noch. Beispielsweise hat Panda CSS, eine CSS-in-JS-Bibliothek der Macher von Chakra UI, gerade die Unterstützung für React Server Components angekündigt.

• Server Actions (Alpha): Server Actions ermöglichen serverseitige Datenmutationen, reduzieren clientseitiges JavaScript und bieten progressiv verbesserte Formulare. Wir empfehlen noch nicht, Server Actions in der Produktion zu verwenden. Wir schätzen das frühe Feedback von Alpha-Testern, die uns helfen, die Zukunft dieser Funktion zu gestalten.

Danke

Wir sind dankbar, dass viele von Ihnen sich entschieden haben, mit Next.js zu lernen und zu bauen.

Unser Fokus auf Leistung, Stabilität und Entwicklererfahrung wird sich in den kommenden Releases von Next.js widerspiegeln. Wir möchten, dass die Nutzung von Next.js erfreulich ist – und Sie (und Ihr Team) produktiver macht.

Wie immer schätzen wir Ihr Feedback sehr. Wenn Sie Probleme mit Next.js haben, eröffnen Sie bitte ein Issue oder starten Sie eine neue Diskussion, und wir werden es untersuchen.