Next.js 10.1

Wir freuen uns, Next.js 10.1 mit folgenden Features vorzustellen:

• 3x schnelleres Refresh: 200ms schnelleres Refresh ohne Änderungen Ihrerseits.
• Verbesserte Installationszeit: 58% kleinere Installationsgröße und 56% weniger Abhängigkeiten.
• Verbesserungen bei next/image: Apple Silicon (M1) Unterstützung sowie mehr Layout- und Loader-Optionen.
• Next.js Commerce Shopify Integration: Flexible Datenebene für komponierbare E-Commerce-Apps.
• Benutzerdefinierte 500-Seite: Eigenes Logo und Branding für Fehlerseiten.
• Strikte PostCSS-Konfigurationsladung: Verbessertes Caching mit Webpack 5.
• Unterstützung für extends in tsconfig.json: Erweiterbare Konfiguration für große TypeScript-Apps.
• Erkennung aktivierter Vorschaumodi: Bedingte Inhaltsanzeige in Vorschauen.
• Router-Methoden Scrollen nach oben: Automatisches Scrollen nach oben, jetzt konsistent für alle Routings.
• Dokumentationsverbesserungen: Inkrementelle Übernahme, Migration und Docker-Bereitstellung.

3x schnelleres Refresh

Seit v9.4 hat Next.js Facebooks Fast Refresh in die Open-Source-Welt gebracht, um sofortiges Feedback auf Änderungen an Ihren React-Komponenten zu ermöglichen.

Das bedeutet, Next.js aktualisiert nur den Code in der bearbeiteten Datei und rendert nur diese Komponente neu, ohne den Komponentenzustand zu verlieren. Dies umfasst Styles (inline, CSS-in-JS oder CSS/Sass-Module), Markup, Event-Handler und Effekte (via useEffect).

Heute machen wir es 200ms schneller bei jeder Bearbeitung ohne Codeänderungen Ihrerseits. Im Durchschnitt ist Fast Refresh damit 3x schneller.

Noch schnellere Performance und bessere Build-Zeiten? Aktivieren Sie Webpack 5 heute mit einem neuen future-Flag. Dieses Flag ist ein Release Candidate (RC) und Webpack 5 wird bald Standard sein. Nach Aktivierung teilen Sie uns bitte Ihr Feedback mit.

module.exports = {
  future: {
    webpack5: true,
  },
};

Mehr zur rückwärtskompatiblen Einführung von Webpack 5 finden Sie in der Dokumentation.

Verbesserte Installationszeit

Wir haben den Abhängigkeitsgraphen von Next.js optimiert, um Installationszeit und -größe zu reduzieren. Die Erstellung eines Next.js-Projekts ist jetzt schneller denn je, lokal und im CI/CD-Prozess.

Im Rahmen unserer Optimierungsziele haben wir auch npm-Pakete aktualisiert/ersetzt, die von ihren Autoren als veraltet markiert wurden – selbst wenn sie tief im Abhängigkeitsbaum lagen. Eine frische Installation von Next.js 10.1 zeigt jetzt keine Paketwarnungen mehr.

Verbesserungen bei next/image

Apple Silicon Unterstützung

Bei der Veröffentlichung von Next.js 10 wurde die Bildoptimierung durch eine native Abhängigkeit ermöglicht. Dies führte zu längeren Installationszeiten, wobei native Abhängigkeiten 50% der gesamten Installationsgröße von Next.js ausmachten. Zudem entfällt dadurch die Ausführung von Post-Install-Skripten und On-Demand-Kompilierung.

Wir freuen uns, mitteilen zu können, dass die automatische Bildoptimierung via next/image nun durch WebAssembly betrieben wird. Diese Optimierung funktioniert out-of-the-box mit next dev und next start. Durch WASM haben wir die Installationsgröße um ~30MB reduziert und Unterstützung für Apple Silicon M1 MacBooks hinzugefügt.

Wir verbessern weiterhin die WebAssembly-Performance durch Nutzung von SIMD-Erweiterungen und Multithreading.

Zusätzliche Layouts

Basierend auf Ihrem Feedback haben wir neue Layouts und Optionen für next/image hinzugefügt:

• layout=fill: Keine Angabe von width und height nötig. (Demo)
• layout=fixed: Natives img-Verhalten. (Demo)
• layout=responsive: Flexible Breite mit festem Seitenverhältnis. (Demo)
• layout=intrinsic: Wachstum begrenzt, aber Schrumpfung mit festem Seitenverhältnis. (Demo)
• objectFit=cover: Hintergrundbilder. (Demo)

Mehr Informationen finden Sie in der layout-Dokumentation.

Verbesserte Bildoptimierungsunterstützung

Wir haben die integrierten Image Loader für next/image erweitert, sodass Sie nun jeden benutzerdefinierten Loader hinzufügen können. Mit der neuen loader-Prop können Sie Bilder mit jedem Provider oder CDN optimieren.

import Image from 'next/image';
 
const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
};
 
const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  );
};

Mehr Informationen finden Sie in der next/image-Dokumentation.

Next.js Commerce Shopify Integration

E-Commerce ist eine der am schnellsten wachsenden Branchen, die Next.js adoptieren. Unternehmen wie Apple, Wal-Mart, McDonald's und Nike vertrauen auf Next.js.

Wir wollten Ihnen einen hochperformanten Ausgangspunkt für E-Commerce-Apps bieten, daher haben wir Next.js Commerce veröffentlicht. Nach tausenden Anfragen für Shopify haben wir Next.js Commerce mit einer anbieterunabhängigen UI aktualisiert – sodass Sie jede Headless-E-Commerce-Lösung Ihrer Wahl integrieren können.

Der Wechsel zwischen Providern ist eine einzeilige Änderung in Ihrer Konfiguration. Wir haben auch eine Features-API erstellt, mit der Sie Funktionen je nach Anwendungsfall aktivieren können – bei gleichbleibend erstklassiger Performance.

Lighthouse-Metriken für Next.js Commerce weltweit.

Mit wenigen Klicks können Next.js-Entwickler ihren eigenen E-Commerce-Store klonen, bereitstellen und vollständig anpassen. Mehr unter nextjs.org/commerce und probieren Sie unsere Shopify Demo. Unterstützung für weitere Commerce-Provider folgt bald.

Benutzerdefinierte 500-Seite

Sie können jetzt eine benutzerdefinierte pages/500.js erstellen, um eigenes Logo und Branding bei Fehlern anzuzeigen. Ähnlich wie pages/404.js wird diese Datei statisch beim Build generiert.

export default function Custom500() {
  return <h1>500 - Serverseitiger Fehler aufgetreten</h1>;
}

Strikte PostCSS-Konfigurationsladung

Bei Verwendung von PostCSS und Webpack 5 können Sie die Performance (durch Caching) mit einem neuen future-Flag verbessern.

module.exports = {
  future: {
    webpack5: true,
    strictPostcssConfiguration: true,
  },
};

Probieren Sie es aus und teilen Sie uns Ihr Feedback mit. Mehr Informationen finden Sie in der PostCSS Config-Dokumentation.

Unterstützung für extends in tsconfig.json

Sie können jetzt extends in der von Next.js verwendeten tsconfig.json nutzen, um von einer anderen tsconfig.json in Ihrem Projekt zu erben. Beispielsweise können Sie von einer tsconfig.base.json wie folgt erben:

{
  "extends": "./tsconfig.base.json"
}

Mehr Informationen finden Sie in der TypeScript-Dokumentation.

Erkennung aktivierter Vorschaumodi

Sie können jetzt erkennen, wenn der Vorschaumodus aktiviert ist, sodass Sie bestimmte Komponenten nur für Editoren rendern können.

import { useRouter } from 'next/router';
 
function MyComponent() {
  const { isPreview } = useRouter();
  return <>{isPreview ? <h1>Vorschaumodus aktiviert</h1> : null}</>;
}

Mehr Informationen finden Sie in der Preview Mode-Dokumentation.

Router-Methoden Scrollen nach oben

Bei Navigation mit next/link scrollt Next.js automatisch nach oben. Ab Next.js 10.1 werden router.push und router.replace ebenfalls automatisch nach oben scrollen, um das next/link-Verhalten zu spiegeln. Sie können das automatische Scrollen mit der scroll-Option deaktivieren.

Mehr Informationen finden Sie in der next/router-Dokumentation.

Dokumentationsverbesserungen

Wir haben auch neue Anleitungen, Ressourcen und Dokumentationen hinzugefügt, darunter:

• Inkrementelle Next.js-Adoption
• Migration von Gatsby
• Migration von Create React App
• Migration von React Router
• Authentifizierung
• Bereitstellung mit Docker

Community

Wir freuen uns über das anhaltende Wachstum der Next.js-Adoption:

• Über 1.540 unabhängige Contributor, darunter über 240 neue seit Release 10.0
• Auf GitHub wurde das Projekt über 64.950 Mal mit einem Stern versehen.

Treten Sie der Next.js-Community auf GitHub Discussions bei. Discussions ist ein Community-Bereich, der Ihnen die Verbindung mit anderen Next.js-Nutzern ermöglicht, um Fragen zu stellen oder Arbeiten zu teilen. Sie können auch dem offiziellen Next.js Discord beitreten.

Danksagungen

Wir danken unserer Community, einschließlich aller externen Feedbacks und Beiträge, die diesen Release geprägt haben.

Dieser Release wurde ermöglicht durch die Beiträge von: @shuding, @edazpotato, @laithyounes, @ijjk, @harshitsan, @selrond, @sromexs, @melono6, @timneutkens, @madou, @mottox2, @leerob, @divmain, @nblthree, @KennethKinLum, @KarthikeyanRanasthala, @alex-safian, @rishabhpoddar, @daviavmello, @jpalmieri, @merceyz, @Segolene-Alquier, @michrome, @janicklas-ralph, @Parnswir, @giraffesyo, @balazsorban44, @Cicada95, @vzaidman, @deniseyu, @eltociear, @unimprobable, @getspooky, @Timer, @armand1m, @alexknipfer, @elitan, @atcastle, @noahfschr, @amille44420, @laanayam333, @spidgorny, @devuxer, @Janpot, @nickbabcock, @rsipakov, @NkxxkN, @dominicfraser, @alevosia, @Kerumen, @CMeeg, @Pomaio, @tim-hanssen, @lachlanjc, @lebreRafael, @AryanBeezadhur, @guybedford, @petecorreia, @kaznak, @sam3d, @fwuensche, @rafaellaurindo, @sphilee, @styxlab, @rexxars, @smitbarmase, @maerzhase, @matamatanot, @lucleray, @jeremybalog, @tarunama, @zainfathoni, @destumme, @VictorAssis, @bhbs, @ciruz, @simnalamburt, @Almad, @frol, @ludofischer, @elliottsj, @Baheya, @Lalit2005, @vldmrkl, @AriFreyr, @kaykdm, @Sharcoux, @ramasilveyra, @devknoll, @botv, @pkellner, @sumanthratna, @sokra, @lfades, @thorwebdev, @berndartmueller, @davidspiessens, @ShashiSrinath, @elsigh, @MMT-LD, @hankandre, @maxnowack, @kmjennison, @darshkpatel, @mohsen1, @DylanRJohnston, @calmonr, @imrobinized, @justintemps, @ncarchedi, @btk, @faizanv, @chulkilee, @ryan-lustre, @dfelber, @Ymirke, @Robogeek95, @mcha-dev, @youngvform, @andrehsu, @Simply007, @rokobekavac0, @ja0n, @mattruby, @xom9ikk, @niko20, @LauraBeatris, @armspkt, @xiaooye, @sungpro, @awareness481, @joebernard, @jensmeindertsma, @donavon, @DaneTheory, @Zertz, @danielyefet, @lfender6445, @tajo, @jorrit, @tvler, @mustafaKamal-fe, @prateekbh, @gregrickaby, @enochndika, @zimv, @lharries, @JstnEdr, @zbialecki, @fredmontet, @leo, @kachkaev, @mongolyy, @justinphilpott, @mjr, @fireairforce, @jvarho, @gr-qft, @thomaswang, @c316, @benbender, @michael, @damusnet, @farhankk360, @smaktacular, @webda2l, @chibicode, @bar7b, @SiTaggart, @lolobosse, @jamesgeorge007, @nikosantis, @mikan3rd, @oshdev, @UnbearableBear, @tunesmith, @jamsinclair, @ivandotv, @Arthie, @louison, @FutureKode, @wesleytian, @dennismorello, @vispaduchuri, @styfle, @caulagi, @berekuk, @jescalan, @cascandaliato, @coetry, @PepijnSenders, @dkempner, @dlackty, @aralroca, @felixmeziere, @bmvantunes, @hideokamoto, @bram-l, @craigdanj, @ErikAugust, @joiglifberg, @blvdmitry, @bragle, @ykdojo, @vitorhsb, @TrySound, @mattfwood, @ka2jun8, @rfinkley, @bannier, @karlhorky, @shihabus, @yakovlevyuri, @dav-is, @lundgren2, @NoobTW, @Cow258, @toshi1127, @jorisw, @rifaidev, @willianjusten, @willheslam, @alexvilchis, @vitordino, @matthewlilley, @Prottoy2938, @brunocrosier, @OriginalEXE, @sidthesloth92, @davidsonsns, @saitolume, @tolfino, @iczero, @WestonThayer, @galanggg, @davidgolden, @weichienhung, @ashconnell, @callumbooth, @lyderichti59, @lukyth, @FredyC, @danielstocks, @valse, @MrJmpl3, @Sm1t, @lucas-varela, @jose-donato, @chr-ge, @pocorschi, @jflayhart, @aried3r, @LittleboyHarry, @Akumzy, @xeust, @tonyspiro, @yordis, @AmrSaber, @Mzaien, @PaulPCIO, @quinnturner, @SebastianTroc, @JipSterk, @developit, @yokinist, @queq1890, @oriverk, @ospira, @danielivert, @huv1k, @minhtule, @shunkakinoki, @khades, @eric-burel, @turadg, @huozhi, und @scottmacdonnell!