BackZurück zum Blog

Next.js 12.3

Next.js 12.3 führt TypeScript Auto-Install, verbessertes Fast Refresh, eine stabile neue Image-Komponente und mehr ein!

Wir haben einige Verbesserungen für den Komfort in Next.js mit Version 12.3 veröffentlicht:

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

Die dritte globale Next.js Community-Konferenz am 25. Oktober wird angekündigt. Jetzt registrieren →

Next.js Conf

Sie sind eingeladen zur globalen Next.js Community-Konferenz am 25. Oktober. Zum 6. Jubiläum von Next.js werden wir vorstellen:

  • Features, die React Server Components, Streaming und Suspense nutzen.
  • Konventionen, die es Entwicklern erleichtern, Anwendungen zu optimieren und zu skalieren.
  • Open-Source-Tools, die die lokale Entwicklung und Produktions-Builds beschleunigen.

Sichern Sie sich Ihr kostenloses Ticket und sehen Sie die Zukunft von Next.js und React. Folgen Sie @nextjs für weitere Ankündigungen. Wir suchen auch Community-Beiträge. Reichen Sie einen Vortragsvorschlag ein und teilen Sie die Geschichte Ihrer Next.js-Projekte.

TypeScript Auto-Install

Next.js hat eingebaute Unterstützung für die automatische Konfiguration von TypeScript. Bisher erforderte das Hinzufügen von TypeScript zu einem bestehenden Projekt die manuelle Installation der notwendigen Abhängigkeiten.

Mit diesem Release erkennt Next.js automatisch, wenn TypeScript-Dateien zu einem Projekt hinzugefügt werden, installiert die erforderlichen Abhängigkeiten und fügt eine tsconfig.json Datei hinzu. Dies funktioniert bei der Ausführung von next dev und next build.

Video zeigt Next.js beim automatischen Installieren von TypeScript.

Verbessertes Fast Refresh

Schnelle Iterationen sind entscheidend für Ihren lokalen Entwicklungs-Workflow. Next.js verwendet Fast Refresh für sofortiges Feedback bei Änderungen an Ihren React-Komponenten. Speichern Sie und sehen Sie Ihre Änderungen im Browser ohne die Seite neu laden zu müssen.

Mit Next.js 12.3 werden nun auch einige Konfigurationsdateien hot reloaded bei Änderungen, darunter:

  • .env und env.* Varianten
  • jsconfig.json
  • tsconfig.json

Sie müssen Ihren lokalen Entwicklungsserver nicht mehr neu starten, wenn Sie Änderungen an diesen Konfigurationsdateien vornehmen.

Video zeigt Next.js beim Hot Reloading einer .env Datei.

Image-Komponente

next/future/image Komponente (Stabil)

In Next.js 12.2 haben wir eine experimentelle Vorschau einer neuen Image-Komponente geteilt, die das Styling von Bildern vereinfacht und die Performance durch native Browser-Lazy-Loading verbessert.

Die neue Image-Komponente ist jetzt stabil und benötigt keinen experimentellen Flag mehr.

Seit dem letzten Release haben wir weitere Verbesserungen vorgenommen:

  • Unterstützung für den fill Layout-Modus hinzugefügt, der bewirkt, dass das Bild das Elternelement ausfüllt.
  • Den Blur-Up-Placeholder verbessert, sodass er mit transparenten Bildern funktioniert, kein <noscript> mehr benötigt und next dev mit next start übereinstimmt.
  • Subtile Layout-Shifts (in Browsern außer Chrome) verhindert, indem alt-Text während des Ladens des Bildes ausgeblendet wird.
  • alt-Eigenschaft für bessere Barrierefreiheit als Pflicht eingeführt.
  • onError-Eigenschaft behoben, wenn ein Fehler vor der Hydration auftritt.
  • Seitenverhältnis für statisch importierte Bilder behoben, die nur width oder nur height haben.
  • Fehlermeldungen bei falschen Einstellungen oder Konfigurationen verbessert.

In Zukunft planen wir, next/image in next/legacy/image und next/future/image in next/image umzubenennen. Dies wird eine großartige Erfahrung für neue Next.js-Projekte bieten, und bestehende Projekte können einfach mit unserem next/image Codemod migrieren. Wir werden mehr Details im Vorfeld der nächsten Hauptversion bereitstellen.

Weitere Informationen zur Verwendung finden Sie in der Dokumentation, die auch eine Migrationsanleitung enthält.

Remote Patterns (Stabil)

remotePatterns ermöglicht es Ihnen, Wildcards für Remote-Bilder anzugeben, wenn Sie die eingebaute Image Optimization API verwenden. Es ermöglicht leistungsfähigeres Matching über die bestehende images.domains Konfiguration hinaus, die nur exakte Übereinstimmungen mit Domain-Namen durchführt.

Diese Option ist jetzt stabil und kann mit folgender Konfiguration verwendet werden:

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        // Der `src`-Property-Hostname muss mit `.example.com` enden,
        // sonst antwortet die API mit 400 Bad Request.
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
};

Image Optimization deaktivieren (Stabil)

Die Image Optimization API benötigt einen Server, um Bilder bei Bedarf zu optimieren, wenn sie angefordert werden. Dies funktioniert hervorragend beim Selbst-Hosting mit next start oder bei der Bereitstellung auf Plattformen wie Vercel. Allerdings funktioniert dies nicht mit next export, da kein Server für die Bildoptimierung enthalten ist. Bisher mussten Sie einen Drittanbieter für die Bildoptimierung mit der loader-Prop konfigurieren, aber jetzt können Sie die Bildoptimierung komplett über next.config.js für alle Instanzen von next/image deaktivieren.

Diese bisher experimentelle Option ist jetzt stabil und kann mit folgender Konfiguration verwendet werden:

next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
};

SWC Minifier (Stabil)

In Next.js 12 haben wir die Code-Minifizierung mit SWC als Teil der experimentellen Features des Next.js Compilers eingeführt. Frühe Ergebnisse zeigten, dass die Minifizierung mit SWC 7x schneller war als die vorherige Version mit Terser.

Mit diesem Release ist das Feature stabil und Sie können es mit folgender next.config.js Option aktivieren:

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

Wir planen, den SWC-Minifier in der nächsten Hauptversion als Standard zu machen.

Neuer Router und Layouts Update

Anfang dieses Jahres haben wir das Layouts RFC veröffentlicht, das das größte Update für Next.js seit seiner Veröffentlichung im Jahr 2016 darstellt. Diese Änderungen beinhalten einen neuen Router, der auf React Server Components basiert. Die Implementierungsarbeit hat begonnen und wir arbeiten auf eine öffentliche Beta in der nächsten Hauptversion hin.

Heute teilen wir weitere Informationen über kommende Features, darunter:

  • Route Groups: Wird verwendet, um Routen aus Layouts auszuschließen und Routen ohne Auswirkung auf URL-Pfade zu organisieren.
  • Instant Loading States: Neue Dateikonvention, um einfach Lade-UI hinzuzufügen, gebaut mit Suspense.
  • Error Handling: Neue Dateikonvention, um einfach verschachtelte Error Boundaries und Fehler-UI hinzuzufügen.
  • Templates: Neue Dateikonvention, um gemeinsame UI hinzuzufügen, die eine separate Instanz erstellt und keinen Status teilt.
  • Intercepting Routes, Parallel Routes und Conditional Routes: Neue Konventionen, die es Ihnen ermöglichen, fortgeschrittene Routing-Muster zu implementieren.

Zusätzlich wird in einem separaten RFC die Unterstützung für Global CSS Imports im neuen app-Verzeichnis untersucht. Dies würde es ermöglichen, Pakete zu verwenden, die ihre eigenen .css-Dateien importieren, ohne zusätzliche Konfiguration.

Lesen Sie mehr über diese neuen Features im Layouts RFC.

Weitere Verbesserungen

  • Neue Dokumentation über eingebaute Barrierefreiheits-Features von Next.js.
  • create-next-app-Templates beinhalten jetzt automatisch Dark-Mode-Unterstützung basierend auf Ihren Systemeinstellungen.
  • src/ ist jetzt ein Standard-Linting-Verzeichnis bei Verwendung der integrierten ESLint-Unterstützung.
  • next.config.js beinhaltet jetzt Schema-Validierung mit ajv, was die Fehlverwendung von Konfigurationsoptionen verhindert.
  • next.config.js hat jetzt einen experimentellen Config-Flag fallbackNodePolyfills: false, um zu verhindern, dass Next.js Node.js-APIs für den Browser polyfilled (was zu größeren Bundle-Größen führt). Diese Option führt dazu, dass Next.js einen Build-Time-Fehler anzeigt, der die unnötige Import-Quelle anzeigt.

Community

Next.js ist das Ergebnis der gemeinsamen Arbeit von über 2.000 einzelnen Entwicklern, Industriepartnern wie Google Chrome und Meta und unserem Kernteam bei Vercel.

Dieses Release wurde ermöglicht durch die Beiträge von: @pthomas931, @madmed88, @sanjaiyan-dev, @balazsorban44, @DonghyukJacobJang, @chaiwattsw, @styfle, @dunglas, @ahkhanjani, @promer94, @terrierscript, @shawncal, @insik-han, @QuiiBz, @ykzts, @JoshuaKGoldberg, @lucasassisrosa, @dikwickley, @Brooooooklyn, @sicarius97, @FourwingsY, @manovotny, @SukkaW, @pepoeverton, @jdeniau, @sumiren, @anthonyshew, @pekarja5, @huozhi, @leerob, @fediev, @atcastle, @shuding, @feugy, @jonohewitt, @zakiego, @Schniz, @timneutkens, @wyattjoh, @MaedahBatool, @X7Becka, @nnnnoel, @dcdev67, @alvinometric, @timothympace, @jeferson-sb, @ijjk, @theMosaad, @Yuddomack, @msquitieri, @andreizanik, @nix6839, @thomasballinger, @ziishaned, @xyeres, @nyedidikeke, @maxproske, @sokra, @titusdmoore, @thebergamo, @fikrikarim, @Kikobeats, @clearlyTHUYDOAN, @nasso, @qutek, @kdy1, @kyliau, @housseindjirdeh, @barissayil, @seveibar, @Jessidhia, @santidalmasso, @JohnDaly, @Nikhilnama18, @mduleone, @colinhacks, @ductnn, @josh, @hiro0218, @eltociear, @kwonoj, @valcosmos, @mihaic195, @stefanprobst, @KATT, @thiagomorales, @danielcavanagh, @steven-tey, @hellomhc, @trevor-fauna, @nguyenyou, @eminvergil, @lobsterkatie, @dorian-davis, @sambecker, @isaac-martin, @lfades, @amorimr, @javivelasco, @mongolyy, @Thisen, @zorrolisto, @ethomson, @padmaia, @thisisjofrank, @dominiksipowicz, @awareness481, @pakaponk, @apledger, @longzheng, @tknickman, @rbrcsk, @emersonlaurentino, @carstenlebek, @edusig, @riccardogiorato, @hanneslund, @ryanhaticus, @j-mendez, @armandabric, @WinmezzZ, @andershagbard, @dammy001, @MarDi66, @okmttdhr, @rishabhpoddar, @marjorg, @dustinsgoodman und @zanechua.