Next.js 12

Wie wir auf der Next.js Conf angekündigt haben, ist Next.js 12 unsere größte Veröffentlichung aller Zeiten:

• Rust-Compiler: ~3x schnelleres Fast Refresh und ~5x schnellere Builds
• Middleware (Beta): Volle Flexibilität in Next.js mit Code statt Konfiguration
• React 18 Unterstützung: Native Next.js APIs werden jetzt unterstützt, ebenso wie Suspense
• <Image /> AVIF-Unterstützung: Optional 20% kleinere Bilder
• Bot-aware ISR Fallback: Optimierte SEO für Webcrawler
• Native ES Modules Unterstützung: Ausrichtung auf das standardisierte Modulsystem
• URL-Imports (Alpha): Import von Paketen von beliebigen URLs, keine Installation erforderlich
• React Server Components (Alpha): Jetzt ausprobieren, inklusive SSR-Streaming

Aktualisieren Sie heute durch Ausführen von npm i next@latest.

Schnellere Builds und Fast Refresh mit Rust-Compiler

Wir möchten jeden Next.js-Anwendungsbuild für die Produktion beschleunigen und sofortiges Feedback in der lokalen Entwicklung ermöglichen. Next.js 12 enthält einen brandneuen Rust-Compiler, der die native Kompilierung nutzt.

Unser Rust-Compiler basiert auf SWC, einer offenen Plattform für die nächste Generation schneller Tools. Wir haben das Bundling und die Kompilierung mit ~3x schnellerem Refresh lokal und ~5x schnelleren Builds für die Produktion optimiert. Weitere Verbesserungen und Funktionen umfassen:

Ergebnisse der Verwendung des neuen Rust-Compilers mit großen Next.js-Codebasen.

• Weitere Geschwindigkeitsverbesserungen für große Codebasen: Wir haben den Rust-Compiler mit einigen der größten Next.js-Codebasen der Welt validiert.
• Verbesserte Beobachtbarkeit der Leistung: Next.js gibt jetzt Fast-Refresh-Zeiten in der Konsole für Client- und Serverkompilierung aus, einschließlich der Anzahl der kompilierten Module und Dateien.
• Unterliegende Webpack-Verbesserungen: Wir haben zahlreiche Verbesserungen an Webpack vorgenommen, einschließlich der Optimierung von Fast Refresh und der Zuverlässigkeit von On-Demand-Entries.

Die Kompilierung mit Rust ist 17x schneller als Babel und standardmäßig in Next.js 12 aktiviert, wodurch die Transformation von JavaScript- und TypeScript-Dateien ersetzt wird. Dies bedeutete, dass wir die Babel-Transformationen in Next.js nach Rust portieren mussten, einschließlich eines brandneuen CSS-Parsers in Rust, der für die styled-jsx-Transformation verwendet wird.

Der neue Rust-Compiler ist abwärtskompatibel. Wenn Sie eine bestehende Babel-Konfiguration haben, werden Sie automatisch ausgenommen. Wir planen, das Parsing für beliebte Bibliotheken wie styled-components, emotion und relay bald zu portieren. Wenn Sie eine benutzerdefinierte Babel-Einrichtung verwenden, teilen Sie uns bitte Ihre Konfiguration mit.

Sie können sich auch für die Verwendung des Rust-Compilers für die Minifizierung entscheiden. Diese ist 7x schneller als Terser. Die Minifizierung ist optional, bis sie gründlich validiert ist, da sie eine mehrjährige Infrastruktur ersetzt.

module.exports = {
  swcMinify: true,
};

Neben der Einstellung von DongYoon Kang, dem Schöpfer von SWC, und Maia Teegarden, einer Mitwirkenden an Parcel, investieren wir weiterhin in das Rust-Ökosystem. Wenn Sie Erfahrung mit Rust haben, bewerben Sie sich bitte für unser Team.

Weitere Informationen finden Sie in unserer Demo von der Next.js Conf.

Einführung von Middleware

Middleware ermöglicht Ihnen die Verwendung von Code statt Konfiguration. Dies gibt Ihnen volle Flexibilität in Next.js, da Sie Code ausführen können, bevor eine Anfrage abgeschlossen ist. Basierend auf der eingehenden Anfrage des Benutzers können Sie die Antwort durch Umschreiben, Umleiten, Hinzufügen von Headern oder sogar durch Streaming von HTML modifizieren.

Middleware gibt Ihnen vollständige Flexibilität in Next.js.

Middleware kann für alles verwendet werden, was Logik für eine Reihe von Seiten teilt, einschließlich:

• Authentifizierung
• Bot-Schutz
• Umleitungen
• Umschreibungen
• Feature-Flags und A/B-Tests
• Erweiterte i18n-Routing-Anforderungen
• Und mehr!

Middleware verwendet eine strikte Laufzeitumgebung, die Standard-Web-APIs wie fetch unterstützt. Dies funktioniert sofort mit next start sowie auf Edge-Plattformen wie Vercel, die Edge Middleware verwenden.

Um Middleware in Next.js zu verwenden, können Sie eine Datei pages/_middleware.js erstellen. In diesem Beispiel verwenden wir die standardmäßige Web-API Response (MDN):

export function middleware(req, ev) {
  return new Response('Hello, world!');
}

Weitere Informationen finden Sie in unserer Demo von der Next.js Conf und in der Dokumentation.

Vorbereitung auf React 18

React 18 wird Funktionen wie Suspense, automatische Bündelung von Updates, APIs wie startTransition und eine neue Streaming-API für Server-Rendering mit Unterstützung für React.lazy hinzufügen.

Wir haben eng mit dem React-Team bei Facebook zusammengearbeitet, um Next.js für React 18 vorzubereiten, während es sich auf eine stabile Veröffentlichung zubewegt. Wir machen diese Funktionen heute in Next.js 12 unter einem experimentellen Flag verfügbar.

npm install react@alpha react-dom@alpha

Server-seitiges Streaming

Concurrent-Features in React 18 umfassen eine eingebaute Unterstützung für server-seitiges Suspense und SSR-Streaming. Dies ermöglicht es Ihnen, Seiten mit HTTP-Streaming server-seitig zu rendern. Dies ist eine experimentelle Funktion in Next.js 12, aber sobald aktiviert, verwendet SSR dieselbe strikte Laufzeitumgebung wie Middleware.

Um dies zu aktivieren, verwenden Sie das experimentelle Flag concurrentFeatures: true:

module.exports = {
  experimental: {
    concurrentFeatures: true,
  },
};

React Server Components

React Server Components ermöglichen es uns, alles einschließlich der Komponenten selbst auf dem Server zu rendern. Dies unterscheidet sich grundlegend vom Server-seitigen Rendering (SSR), bei dem HTML auf dem Server vorab generiert wird. Mit Server Components ist kein clientseitiges JavaScript erforderlich, was das Rendering von Seiten beschleunigt. Dies verbessert die Benutzererfahrung Ihrer Anwendung, indem es die besten Aspekte des Server-Renderings mit clientseitiger Interaktivität kombiniert.

module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true,
  },
};

Next.js ermöglicht es Ihnen nun, Datenabfragen auf Komponentenebene durchzuführen, alles ausgedrückt als JSX. Durch die Verwendung von React Server Components können wir Dinge vereinfachen. Spezielle Funktionen wie getServerSideProps oder getStaticProps sind nicht mehr erforderlich. Dies entspricht dem React Hooks-Modell, bei dem Datenabfragen mit Ihren Komponenten zusammengeführt werden.

Sie können jede Next.js-Seite in .server.js umbenennen, um eine Server Component zu erstellen, und Client Components direkt in Ihren Server Components importieren. Diese Client Components werden hydratisiert und interaktiv, sodass Sie Funktionen wie Upvotes hinzufügen können.

Wir arbeiten derzeit an server-seitigem Suspense, selektiver Hydratation und Streaming-Rendering in Next.js und werden unsere Fortschritte in einem zukünftigen Blogbeitrag teilen.

Besonderer Dank geht an unsere Mitarbeiter Kara Erickson und Gerald Monaco vom Google Aurora-Team für ihre Arbeit an React 18 und Server Components.

Weitere Informationen finden Sie in unserer Demo von der Next.js Conf und in der Dokumentation.

ES Modules Support und URL Imports

ES Modules bringen ein offizielles, standardisiertes Modulsystem zu JavaScript. Sie werden von allen gängigen Browsern sowie Node.js unterstützt.

Dieser Standard treibt das Web-Ökosystem voran, indem er kleinere Paketgrößen und JavaScript-Bundles ermöglicht, was letztendlich zu einer besseren Benutzererfahrung führt. Während das JavaScript-Ökosystem von Common JS (dem alten Standard) zu ES Modules übergeht, sind wir bestrebt, Entwicklern bei der schrittweisen Einführung dieser Verbesserungen zu helfen, ohne unnötige Breaking Changes zu verursachen.

Ab Next.js 11.1 haben wir experimentelle Unterstützung für ES Modules hinzugefügt, die gegenüber CommonJS-Modulen priorisiert werden. In Next.js 12 ist dies nun die Standardeinstellung. Das Importieren von NPM-Modulen, die nur CommonJS bereitstellen, wird weiterhin unterstützt.

URL Imports

Next.js 12 beinhaltet experimentelle Unterstützung für den Import von ES Modules über URLs, ohne dass eine Installation oder ein separater Build-Schritt erforderlich ist.

URL Imports ermöglichen es Ihnen, beliebige Pakete direkt über eine URL zu verwenden. Dadurch kann Next.js entfernte HTTP(S)-Ressourcen genau wie lokale Abhängigkeiten verarbeiten.

Wenn ein URL Import erkannt wird, generiert Next.js eine next.lock-Datei, um entfernte Ressourcen zu verfolgen. URL Imports werden lokal zwischengespeichert, um sicherzustellen, dass Sie auch offline arbeiten können. Next.js unterstützt sowohl Client- als auch Server-URL-Imports.

Um dies zu aktivieren, fügen Sie die erlaubten URL-Präfixe in next.config.js hinzu:

module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev'],
  },
};

Dann können Sie Module direkt von URLs importieren:

import confetti from 'https://cdn.skypack.dev/canvas-confetti';

Jede CDN, die ES Modules bereitstellt, funktioniert, einschließlich No-Code- und Design-Tools wie Framer:

• Skypack
• esm.sh
• jsDelivr
• JSPM
• unpkg

Weitere Informationen finden Sie in unserer Demo von der Next.js Conf und in der Dokumentation.

Bot-Aware ISR Fallback

Aktuell rendert Incremental Static Regeneration mit fallback: true einen Fallback-Zustand, bevor die Seiteninhalte bei der ersten Anfrage an eine noch nicht generierte Seite gerendert werden. Um das Laden der Seite zu blockieren (Server-Rendering), müssten Sie fallback: 'blocking' verwenden.

In Next.js 12 werden Webcrawler (z.B. Suchbots) ISR-Seiten automatisch mit fallback: true server-seitig rendern, während nicht-Crawler-User-Agents weiterhin den bisherigen Fallback-Zustand erhalten. Dies verhindert, dass Crawler Ladezustände indexieren.

Kleinere Bilder mit AVIF

Die integrierte Image Optimization API unterstützt nun AVIF-Bilder, die 20 % kleiner sind als WebP-Bilder.

AVIF-Bilder können im Vergleich zu WebP länger für die Optimierung benötigen, daher machen wir diese Funktion über die neue images.formats-Eigenschaft in next.config.js opt-in:

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
};

Diese Liste von Formaten wird verwendet, um das optimierte Bildformat on-demand anhand des Accept-Headers der Anfrage zu bestimmen. Da AVIF an erster Stelle steht, wird es serviert, wenn der Browser AVIF unterstützt. Falls nicht, wird WebP serviert, wenn der Browser WebP unterstützt. Wenn keines der Formate unterstützt wird, wird das ursprüngliche Bildformat serviert.

Output File Tracing

In Next.js 8 haben wir die target-Option eingeführt. Dadurch konnten Next.js-Seiten als eigenständige JavaScript-Bundles ausgegeben werden, indem alle Abhängigkeiten während des Builds mit webpack gebündelt wurden. Wir haben schnell erkannt, dass dies nicht ideal ist, und haben stattdessen @vercel/nft erstellt. @vercel/nft wird seit über 2 Jahren bei allen Deployments auf der Vercel-Plattform verwendet.

Jetzt bringen wir diese Verbesserungen standardmäßig direkt in das Next.js-Framework, für alle Deployment-Plattformen, und bieten einen deutlich verbesserten Ansatz gegenüber der target-Option.

Next.js 12 verfolgt automatisch, welche Dateien von jeder Seite und API-Route benötigt werden, und gibt diese Trace-Ergebnisse neben der next build-Ausgabe aus, sodass Integratoren die von Next.js automatisch bereitgestellten Traces nutzen können.

Diese Änderungen optimieren auch Anwendungen, die mit Tools wie Docker über next start bereitgestellt werden. Durch die Nutzung von @vercel/nft werden wir in der Lage sein, die Next.js-Ausgabe in Zukunft eigenständig zu machen. Es werden keine Abhängigkeiten mehr installiert werden müssen, um die Anwendung auszuführen, was die Docker-Image-Größe erheblich reduziert.

Die Integration von @vercel/nft in Next.js ersetzt den target-Ansatz, wodurch target in Next.js 12 als veraltet markiert wird. Weitere Informationen finden Sie in der Dokumentation.

Weitere Verbesserungen

• Das Hinzufügen von pages/_app.js oder pages/_document.js zu Ihrer Anwendung ersetzt nun automatisch die eingebaute Version, ohne dass ein Neustart der Next.js-CLI erforderlich ist.
• Die ESLint-Integration unterstützt nun Single-File-Linting in next lint mit dem --file-Flag.
• Next.js 12 unterstützt nun das Setzen eines benutzerdefinierten tsconfig.json-Pfads.
• next.config.mjs wird nun unterstützt, um die Konfiguration als ES Modules zu schreiben.
• In-flight-Requests werden nun für getStaticProps dedupliziert.
• Die Überprüfung statischer Seiten erfolgt nun mit einem gemeinsamen Worker-Pool.
• Fast Refresh verwendet nun eine WebSocket-Verbindung anstelle einer EventSource-Verbindung.

Breaking Changes

• Nachdem wir webpack 5 in Next.js 11 zum Standard gemacht haben, haben wir webpack 4 nun offiziell entfernt. Wir haben eng mit der Community zusammengearbeitet, um einen reibungslosen Übergang zu webpack 5 zu gewährleisten.
• target in next.config.js wird nicht mehr benötigt.
• next/image verwendet nun ein span als umschließendes Element anstelle eines div.
• Die minimale Node.js-Version wurde von 12.0.0 auf 12.22.0 erhöht, die erste Version von Node.js mit nativer ES Modules-Unterstützung.

Weitere Informationen finden Sie im Upgrade Guide.

Community

Vor fünf Jahren haben wir Next.js der Öffentlichkeit vorgestellt. Unser Ziel war es, ein Zero-Configuration-React-Framework zu bauen, das Ihre Entwicklererfahrung vereinfacht. Rückblickend ist es erstaunlich zu sehen, wie die Community gewachsen ist und was wir gemeinsam erreicht haben. Lasst uns weitermachen.

Next.js ist das Ergebnis der gemeinsamen Arbeit von über 1.800 einzelnen Entwicklern, Industriepartnern wie Google und Facebook und unserem Kernteam.

Diese Version wurde durch die Beiträge von ermöglicht: @ka2n, @housseindjirdeh, @rojserbest, @lobsterkatie, @thibautsabot, @javivelasco, @sokra, @rishabhpoddar, @kdy1, @huozhi, @georgegach, @ionut-botizan, @paul-creates, @TimBarley, @kimizuy, @devknoll, @matamatanot, @christianvuerings, @pgrodrigues, @mohamedbhy, @AlfonzAlfonz, @kara, @molebox, @angelopoole, @oste, @genetschneider, @jantimon, @kyliau, @mxschmitt, @PhattOZ, @finn-orsini, @kriswuollett, @harryheman, @GustavoEdinger, @AryanBeezadhur, @Blevs, @colevscode, @atcastle, @ijjk, @velocity23, @jonowu, @timneutkens, @whitep4nth3r, @micro-chipset, @TyMick, @padmaia, @arthurdenner, @vitorbal, @zNeb, @jacksonhardaker, @shuding, @kylemh, @Bundy-Mundi, @ctjlewis, @thien-do, @leerob, @Dev-CasperTheGhost, @janicklas-ralph, @rezathematic, @KonstHardy, @fracture91, @lorensr, @Sheraff, @HaNdTriX, @emilio, @oluan, @ddzieduch, @colinclerk, @x4th, @volcareso, @oiva, @sinchang, @scottrepreneur, @smakosh, @catnose99, @adrienharnay, @donsn, @andersonleite, @msp5382, @tim-hanssen, @appsplash99, @alexvilchis, @RobEasthope, @royal, @Perry-Olsson, @well-balanced, @mrmckeb, @buraksakalli, @espipj, @prateekbh, @AleksaC, @eungyeole und @rgabs