BackZurück zum Blog

Next.js 12.1

Next.js 12.1 führt bedarfsgesteuerte ISR ein, unterstützt styled-components und Relay, bietet Zero-Config Jest-Unterstützung und mehr!

Wir freuen uns, mit Next.js 12.1 eine der am häufigsten angefragten Funktionen zu veröffentlichen:

Aktualisieren Sie heute mit npm i next@latest.

Bedarfsgesteuerte Incremental Static Regeneration (Beta)

Next.js stellt nun eine Funktion unstable_revalidate() bereit, mit der Sie einzelne Seiten, die getStaticProps verwenden, neu validieren können. Dies war eine der am häufigsten gewünschten Funktionen seit der Einführung von Incremental Static Regeneration (ISR) in Next.js 9.5.

Seit der Veröffentlichung von ISR haben Unternehmen wie Tripadvisor, Parachute, HashiCorp und andere ihre Build-Zeiten drastisch verbessert, während sie gleichzeitig eine hervorragende Leistung beibehalten haben. Wir haben jedoch Ihr Feedback zu zeitbasierten Neuvalidierungen gehört und freuen uns, mehr Flexibilität zu bieten.

Aktuell sehen alle Besucher dieselbe generierte Version Ihrer Seite für eine Minute, wenn Sie eine revalidate-Zeit von 60 festlegen. Die einzige Möglichkeit, den Cache zu invalidieren, bestand darin, dass jemand die Seite nach Ablauf der Minute besucht. Sie können den Next.js-Cache nun manuell für eine bestimmte Seite bedarfsgesteuert leeren.

Dies erleichtert die Aktualisierung Ihrer Seite, wenn:

  • Inhalte aus Ihrem Headless-CMS erstellt oder aktualisiert werden
  • E-Commerce-Metadaten geändert werden (Preis, Beschreibung, Kategorie, Bewertungen usw.)
pages/api/revalidate.js
export default async function handler(req, res) {
  // Überprüfen des Secrets, um sicherzustellen, dass dies eine gültige Anfrage ist
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Ungültiges Token' });
  }
 
  try {
    await res.unstable_revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // Bei einem Fehler zeigt Next.js weiterhin
    // die zuletzt erfolgreich generierte Seite an
    return res.status(500).send('Fehler beim Neuvalidieren');
  }
}

In getStaticProps müssen Sie revalidate nicht angeben, um die bedarfsgesteuerte Neuvalidierung zu nutzen. Wenn revalidate weggelassen wird, verwendet Next.js den Standardwert false (keine Neuvalidierung) und validiert die Seite nur bedarfsgesteuert neu, wenn unstable_revalidate() aufgerufen wird.

Incremental Static Regeneration funktioniert mit allen Anbietern, die die Next.js Build API (next build) unterstützen. Bei einer Bereitstellung auf Vercel verbreitet sich die bedarfsgesteuerte Neuvalidierung nun global in ~300ms, wenn Seiten an den Edge gepusht werden.

Sehen Sie sich unsere Demo an, um die bedarfsgesteuerte Neuvalidierung in Aktion zu sehen, und geben Sie uns Feedback. Svix (enterprise-ready Webhooks) und Clerk (Authentifizierung) haben ebenfalls eine Demo von bedarfsgesteuerter ISR erstellt.

Verbesserte SWC-Unterstützung

Wir möchten, dass jede Next.js-Anwendung schneller für die Produktion gebaut wird und in der lokalen Entwicklung sofortiges Feedback erhält. Next.js 12 hat einen neuen Rust-basierten Compiler eingeführt, der die native Kompilierung nutzt.

Mit 12.1 haben wir die Unterstützung für den Next.js-Compiler für folgende Funktionen hinzugefügt:

Mit diesen sechs zusätzlichen Transforms haben wir nun die gängigsten Babel-Plugins mit dem neuen Compiler nach Rust portiert. Wenn Sie andere Plugins sehen möchten, teilen Sie uns dies bitte in der Diskussion mit. Außerdem arbeiten wir an einem System für hochperformante WebAssembly-Plugins, das durch SWC ermöglicht wird.

Zero-Configuration Jest-Plugin

Next.js konfiguriert Jest nun automatisch für Sie (next/jest) und verwendet dabei den Rust-basierten Next.js-Compiler zur Transformation von Dateien, einschließlich:

  • Automatisches Mocking von Stylesheets (.css, .module.css und deren .scss-Varianten) und Bildimporten
  • Laden von .env (und allen Varianten) in process.env
  • Ignorieren von node_modules bei der Testauflösung und Transformation
  • Ignorieren von .next bei der Testauflösung
  • Laden von next.config.js für Flags, die Next.js-Compiler-Transforms aktivieren

Lesen Sie die Dokumentation, um mehr zu erfahren, oder starten Sie mit unserem Jest-Beispiel.

Schnellere Minifizierung mit SWC

Mit Next.js 12 haben wir die Minifizierung mit SWC als Teil des Next.js-Compilers eingeführt. Erste Ergebnisse zeigten, dass sie 7x schneller als Terser ist. Die Minifizierung mit SWC ist nun in Next.js 12.1 als Release Candidate (RC) verfügbar und wird in 12.2 standardmäßig aktiviert sein.

Sie können die Verwendung von SWC für die Minifizierung in next.config.js aktivieren:

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

Teilen Sie uns Ihr Feedback in der Diskussion mit.

Schnellere Image-Optimierung

Die integrierte Image-Optimierung-API wurde aktualisiert, um das gleiche Muster wie ISR-Seiten zu unterstützen, bei dem Bilder zunächst veraltet ausgeliefert und im Hintergrund neu validiert werden (auch bekannt als stale-while-revalidate).

Dies ist eine erhebliche Leistungsverbesserung für die Bildoptimierung. Weitere Informationen finden Sie unter Image Caching Behavior.

Verbesserungen für Self-Hosted Next.js

Next.js kann nun automatisch einen standalone-Ordner erstellen, der nur die für Produktionsbereitstellungen notwendigen Dateien kopiert. Dies hat zu ~80% kleineren Docker-Images für selbst gehostete Next.js-Anwendungen geführt.

Um diese automatische Kopie zu nutzen, können Sie sie in Ihrer next.config.js aktivieren:

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

Dadurch wird ein Ordner unter .next/standalone erstellt, der ohne Installation von node_modules bereitgestellt werden kann.

Lesen Sie die Dokumentation oder starten Sie mit dem Docker-Beispiel. Wir haben nun auch ein Multi-Env Docker-Beispiel mit Unterstützung für das Laden verschiedener .env-Dateien basierend auf der Umgebung.

React 18, Server Components und SSR Streaming (Alpha)

Wie auf der Next.js Conf gezeigt, arbeiten wir daran, React 18, Server-Side Suspense, Streaming SSR und schließlich Server Components nach Next.js zu bringen.

Server Components sind eine neue Funktion in React, mit der Sie die Größe Ihres JavaScript-Bundles reduzieren können, indem Sie Server- und Client-Code trennen. Server Components ermöglichen es Entwicklern, Apps zu erstellen, die Server und Client verbinden und dabei die reiche Interaktivität von Client-Apps mit der verbesserten Leistung des traditionellen Server-Renderings kombinieren.

Für Entwickler, die den Fortschritt von Server Components von Alpha zu Beta in Next.js verfolgen, hier einige der neuesten Updates:

Wir arbeiten daran, Ihnen die Möglichkeit zu geben, Ihre gesamte Next.js-Anwendung serverseitig am Edge zu rendern. Sie können wählen, welche Seiten in die Edge-Runtime aufgenommen werden sollen, sodass Sie Seiten schrittweise von Node.js migrieren können, wenn Sie bereit sind.

Wir werden bald einen weiteren Beitrag veröffentlichen, der detaillierter auf die Edge-Runtime eingeht. Beide unserer Demos (next-server-components und next-rsc-demo) wurden mit den neuesten Änderungen aktualisiert.

Weitere Fehlerbehebungen und Verbesserungen

  • Die Verwendung von <a> mit target="blank" führt nicht mehr zu einer ESLint-Warnung, next/link zu verwenden.
  • .d.ts-Dateien werden nicht mehr als Seiten betrachtet.
  • document.title hat nun Vorrang vor h1, wenn Änderungen der Seite für Screenreader angekündigt werden.
  • Das Erstellen von pages/index/[...dynamic].js funktioniert nun, was zuvor aufgrund des reservierten Schlüsselworts index nicht möglich war.
  • Bei Verwendung von dynamic(() => import('./some-component'), { ssr: false }) wird der Import automatisch aus dem Server-Code entfernt (Treeshaking).
  • Um die Installationsgröße zu verringern und die Sicherheit zu verbessern, arbeiten wir daran, weitere Abhängigkeiten vorzukompilieren. Die neueste Ergänzung war node-fetch.
  • Verbesserungen für Fast Refresh bei Verwendung von Middleware.
  • Unterstützung für ESLint 8 mit unserer integrierten ESLint-Integration.
  • styled-jsx wurde auf Version 5.0 aktualisiert, einschließlich neuer hilfreicher Fehlerlinks für alle styled-jsx-Kompilierungsfehler.
  • Edge-Runtime: Unterstützung für AbortController und AbortSignal
  • Edge-Runtime: CryptoKey und globalThis.CryptoKey hinzugefügt.
  • Große Next.js-Anwendungen zeigen ~60% schnellere Fast-Refresh-Zeiten dank aktueller Verbesserungen (über 1.000 Module werden neu geladen).
  • Eine Benachrichtigung wird nun angezeigt, wenn Fast Refresh fehlschlägt und ein vollständiger Seitenneuladung erforderlich ist.
  • Angekündigte Routen überspringen nun korrekt die Ankündigung des initialen Seitenladens bei Verwendung des React-18-Strict-Modus.
  • Wir haben die Anzahl der offenen Issues um fast 300 reduziert im Next.js-Repository im Vergleich zu Dezember 2021 (fast 1000 Issues wurden behoben).

Next.js-Entwicklerumfrage

Teilen Sie uns Ihr Feedback mit und helfen Sie uns, Next.js mit unserer ersten Entwicklerumfrage zu verbessern.

Die Umfrage besteht aus zwei Teilen: einem kurzen Fragebogen mit acht Fragen und einer erweiterten Umfrage, die sich auf Feedback zu einzelnen Funktionen konzentriert. Wir würden uns freuen, wenn Sie beide Teile ausfüllen könnten, falls Sie Zeit haben, aber Sie können Ihre Antworten auch nach dem ersten Teil absenden.

Ihre Antworten werden vollständig anonym sein, obwohl Sie uns gerne die URLs Ihrer Apps mitteilen können, wenn Sie möchten.

Vielen Dank, dass Sie uns helfen, Next.js zu verbessern!

Danke an die Mitwirkenden

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

Um Beiträge zu erleichtern, haben wir das Next.js-Repository auf Turborepo migriert, um die Build-Performance zu verbessern. Wir haben außerdem Gerüste für Tests und Fehlerlinks hinzugefügt, um den Einstieg in das Schreiben von Tests zu erleichtern. Schließlich haben wir ein 40-minütiges Walkthrough-Video aufgenommen, das zeigt, wie man zu Next.js beitragen kann.

Diese Version wurde ermöglicht durch die Beiträge von: @MaedahBatool, @mutebg, @sokra, @huozhi, @hanford, @shuding, @sean6bucks, @jameshfisher, @devknoll, @yuta-ike, @zh-lx, @amandeepmittal, @alunyov, @stefanprobst, @leerob, @balazsorban44, @kdy1, @brittanyrw, @jord1e, @kara, @vvo, @ismaelrumzan, @dlindenkreuz, @MohammadxAli, @nguyenyou, @thibautsabot, @hanneslund, @vertti, @KateKate, @stefee, @mikinovation, @Leticijak, @mohsen1, @ncphillips, @ehowey, @lancechentw, @krychaxp, @fmacherey, @pklawansky, @RyanClementsHax, @lakbychance, @sannajammeh, @oliviertassinari, @alexander-akait, @u-yas, @Cheprer, @msp5382, @chrispat, @getspooky, @Ryz0nd, @klaasman, @midgleyc, @kumard3, @jesstelford, @neeraj3029, @glenngijsberts, @pie6k, @wouterraateland, @timneutkens, @11koukou, @thesyedbasim, @aeneasr, @ijjk, @lfades, @JuniorTour, @xavhan, @mattyocode, @padmaia, @Skn0tt, @gwer, @Nutlope, @styfle, @stipsan, @xhoantran, @eolme, @sespinosa, @zenorocha, @hjaber, @benmvp, @T-O-R-U-S, @dburrows, @atcastle, @kiriny, @molebox, @Vienio99, @kyliau, @PepijnSenders, @krystofex, @PizzaPete, @souljuse, @Schniz, @Nelsonfrank, @Mhmdrza, @hideokamoto-stripe, @Emrin, @gr-qft, @delbaoliveira, @redbar0n, @lxy-yz, @Divlo, @kachkaev, @teleaziz, @OgbeniHMMD, @goncy, @bennettdams, @hsynlms, @callumgare, @jonrosner, @karaggeorge, @rpie3, @MartijnHols, @bashunaimiroy, @NOCELL, @rishabhpoddar, @omariosouto, @theMosaad, @javivelasco, @pierrenel, @lobsterkatie, @tharakabimal, @saevarb, @nbouvrette, @paulnbrd, @ecklf, @renbaoshuo, @chozzz, @tbezman, @karlhorky, @j-mendez, @ffan0811, @arthurfiorette, @chimit, @joperron, @moh12594, @rasmusjp, @bryanrsmith, @TrySound, @josharsh, @thecrypticace, @arturparkhisenko, @segheysens, @thevinter, @AryanBeezadhur, @xiaohp, @tknickman, @oriolcp, @smakosh, @jorrit, @mix3d, @Clecio013, @michielvangendt, @intergalacticspacehighway, @jbraithwaite, @marcelocarmona, @benmerckx, @haykerman, @steven-tey, @jaredpalmer, @pi-guy-in-the-sky, @JuanM04, @apollisa, @D-Pagey, @Kikobeats, @ramosbugs, @dan-weaver, @chris-stytch, @MikevPeeren, @janpio, @emw3, @nubpro, @cmdcolin, @joostdecock, @sgallese, @housseindjirdeh, @minervabot, @cjboco, @Ryuurock, @dm430, @mkarkachov, @nvh95, @gfortaine, @zifeo, @vicente-s, @Rohithgilla12, @brookton, @skirsten, @davidfateh, @DavidBabel, @mannybecerra, @pveyes, @kaykdm, @xhiroga, @mzaien, @losfair, @ykzts, @knezevicdev, @yang-feng-yfeng, @xuchaobei, @elkevinwolf, @fabienheureux, @nilskaspersson, @Andarist, @mathcrln, @dferber90, @FranciscoMoretti, @benschwarz, @wendellhu95, @gazdagergo, @imabp, @ljosberinn, @samuliasmala, @ka2jun8, @monsonjeremy, @pqt, @leoortizz, @michel-kraemer, @ntkoopman, @iicdii, @chentsulin, @ericmatthys, @lennym, @balogunkeji, @wnr, @chemicalkosek, @KittyGiraudel, @OKinane, @KonstHardy, @BrandonRomano, @furcan, @dusanralic, @elliottsj, @hi-ogawa, @panva, @genetschneider, @thundermiracle, @stefano-rainieri, @ericbiewener, @vordgi, @stevejarvis, @ihmpavel, @matamatanot, @dyarfaradj, @iheyunfei, @ascorbic, @fytriht, @emzoumpo, @onurtemiz, @a-ursino, @mxschmitt, @bywo, @OArnarsson, @TurekBot, @gish, @vadymshymko, @kamsar, @skhaz, @Prashoon123, @IrisvanOllefen, @evan-bradley, @ntltd, @EzequielDM, @oBusk, @martpie, @BruceRodrigues, @luke-h1, @lucasvazq, @velocity23, @AkiraTsuboi, @mitheelgajare, @JamiesWhiteShirt, @leroydev, @JulienZD, @leotaku, @mattfwood, und @kripod.