BackZurück zum Blog

Next.js 9.4

Next.js 9.4 führt React Fast Refresh, Incremental Static Regeneration, neue Umgebungsvariablen-Unterstützung, integriertes Fetch und mehr ein!

Wir freuen uns, heute Next.js 9.4 mit folgenden Features vorstellen zu können:

Fast Refresh

Fast Refresh ist eine neue Hot-Reloading-Erfahrung, die Ihnen sofortiges Feedback auf Änderungen an Ihren React-Komponenten gibt. Es ist jetzt standardmäßig aktiviert für alle Projekte mit Next.js 9.4 oder neuer.

Hot Reloading gibt es schon lange, war aber historisch gesehen zu fehleranfällig, um es standardmäßig im Workflow zu aktivieren. Daher implementierte Next.js bisher eine grobe Form des Hot Reloadings, das den gesamten Zustand Ihrer Anwendung zurücksetzte.

Die alte Hot-Reloading-Implementierung war nicht resilient gegenüber Kompilierungs- oder Laufzeitfehlern und führte einen vollständigen Neustart Ihrer Anwendung durch, wenn Sie einen Tippfehler beim Bearbeiten Ihres CSS oder JavaScript machten. Dies war suboptimal und unterbrach Ihren Gedankenfluss.

Fast Refresh ist tief in React selbst integriert (über React Refresh), sodass Next.js präzise Updates an Ihrem React-Komponentenbaum durchführen kann.

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

Eine Bearbeitungssitzung mit Kompilierungs- und Laufzeitfehlern (mit schneller Wiederherstellung) und Änderungen, die den Zustand erhalten.

Als Teil dieser Erfahrung haben wir den Error Overlay komplett neu gestaltet, um hilfreicher zu sein und Ihre Anwendung resilient gegenüber Tippfehlern oder Laufzeitfehlern zu machen. Dazu gehört unter anderem:

  • Genaue Fehlerpositionen, aufgelöst zur ursprünglichen Zeile und Spalte Ihres Codes vor der Kompilierung
  • Kontextuell relevante Quellcode-Ausschnitte mit der Möglichkeit, per Klick im Editor zu öffnen
  • Fortsetzung der Entwicklungssitzung nach Behebung eines Syntaxfehlers, ohne Anwendungszustand zu verlieren
  • Automatisches Schließen von unbehandelten Laufzeitfehlern, wenn Sie den Fehler beheben

Wir möchten uns bei Dan Abramov für seine unschätzbaren Beiträge und Unterstützung bei der Implementierung dieses Features bedanken.

Incremental Static Regeneration (Beta)

Next.js führte in Version 9.3 Static Site Generation-Methoden mit einem klaren Ziel ein: Wir sollten die Vorteile von Static (immer schnell, immer online, global verteilt) erhalten, aber mit exzellenter Unterstützung für dynamische Daten, für die Next.js bekannt ist.

Um das Beste aus beiden Welten zu vereinen, unterstützt Next.js Incremental Static Generation, das statische Inhalte aktualisiert, nachdem Ihre Seite bereits gebaut wurde. In 9.3 haben wir beispielsweise die Option fallback: true in getStaticPaths eingeführt, die es ermöglicht, neue Seiten zur Laufzeit hinzuzufügen.

Wir haben kürzlich ein Beispiel zusammengestellt, das zeigt, wie Next.js auf diese Weise unendlich viele Seiten statisch vorrendern kann.

Heute führen wir auch Incremental Static Regeneration (Beta) ein, einen Mechanismus zum Aktualisieren bestehender Seiten, indem sie im Hintergrund neu gerendert werden, während Traffic eingeht. Inspiriert von stale-while-revalidate stellt dies sicher, dass Traffic unterbrechungsfrei bedient wird, immer statisch, und die neu gebaute Seite erst nach Abschluss der Generierung ausgeliefert wird.

pages/blog/[slug].js
export async function getStaticProps() {
  return {
    props: await getDataFromCMS(),
    // Wir versuchen, die Seite neu zu generieren:
    // - wenn eine Anfrage eingeht
    // - höchstens einmal pro Sekunde
    unstable_revalidate: 1,
  };
}

Im Gegensatz zu SSR stellt Incremental Static Regeneration sicher, dass Sie die Vorteile von Static behalten:

  • Keine Latenzspitzen. Seiten werden konsistent schnell ausgeliefert.
  • Seiten gehen nie offline. Wenn die Hintergrund-Neugenerierung fehlschlägt, bleibt die alte Seite unverändert.
  • Geringe Belastung von Datenbank und Backend. Seiten werden höchstens einmal gleichzeitig neu berechnet.

Beide inkrementellen Features (Hinzufügen von Seiten und deren verzögerte Aktualisierung) sowie der Preview Mode werden bereits vollständig von next start und der Vercel Edge Platform out of the box unterstützt.

Als nächstes arbeiten wir an einem ergänzenden RFC für zwei weitere Fähigkeiten der inkrementellen statischen Generierung:

  • Gleichzeitige Neugenerierung und Invalidierung mehrerer Seiten (z.B. Ihr Blog-Index und ein bestimmter Blog-Post)
  • Neugenerierung durch Abhören von Events (wie CMS-Webhooks) vor Nutzer-Traffic

CMS-Beispiele

Im Anschluss an unsere Ankündigung der Next-Gen Static Site Generation wollten wir reale Szenarien teilen, wie Inhalte von Headless-CMS-APIs abgerufen und als Next.js-HTML gerendert werden.

Wir haben uns mit den Machern einiger der besten CMS-Systeme der Welt zusammengetan: Contentful, DatoCMS, Prismic, Sanity und TakeShape, mit weiteren in Arbeit.

Diese Beispiele sind nicht nur einsatzbereit und 100% Open Source unter MIT-Lizenz, sondern integrieren auch die besten verfügbaren Praktiken:

DatoCMS erzielt makellose Ergebnisse dank ihrer integrierten Bildoptimierungsunterstützung.

DatoCMS erzielt makellose Ergebnisse dank ihrer integrierten Bildoptimierungsunterstützung.

DatoCMS erzielt makellose Ergebnisse dank ihrer integrierten Bildoptimierungsunterstützung

Wir haben auch mit TinaCMS an einer spannenden neuen Richtung für CMS zusammengearbeitet: In-Page-Bearbeitung von Inhalten. Lesen Sie ihre Anleitung, um zu erfahren, wie Sie dies für Ihr Projekt implementieren können.

Neue Umgebungsvariablen-Unterstützung

Ein häufiges Feedback von Unternehmen, die Next.js nutzen, war, dass unklar war, wann eine Umgebungsvariable in das Browser-Bundle eingebettet wird und wann sie nur in der Node.js-Umgebung verfügbar ist.

Heute kündigen wir zwei vollständig abwärtskompatible Features an, die diesen Prozess vereinfachen werden.

Erstens können Sie Umgebungsvariablen jetzt mit NEXT_PUBLIC_ prefixen, um sie im Browser verfügbar zu machen. Wenn diese Umgebungsvariable verwendet wird, wird sie dann in das JavaScript-Bundle des Browsers eingebettet.

Sie müssen nicht mehr eine next.config.js hinzufügen und den env-Key einfügen, um diese Variablen verfügbar zu machen.

pages/index.js
// Die Umgebungsvariable wird im Browser verfügbar sein
console.log('Meine Anwendungsversion', process.env.NEXT_PUBLIC_VERSION);
 
export default function HomePage() {
  return <h1>Hallo Welt</h1>;
}

Die zweite Änderung ist, dass Next.js jetzt standardmäßig .env-Laden unterstützt. Damit können Sie einfach Entwicklungs- und Produktions-Umgebungsvariablen definieren.

Mehr über das .env-Laden erfahren Sie in der Dokumentation zu Umgebungsvariablen.

Diese neuen Features vereinfachen die Nutzung von Umgebungsvariablen durch folgende Konventionen:

  • Umgebungsvariablen sind standardmäßig nur in der Node.js-Umgebung verfügbar
  • Mit NEXT_PUBLIC_ prefixte Umgebungsvariablen werden im Browser verfügbar gemacht

Verbesserte integrierte Fetch-Unterstützung

In Next.js 9.1.7 kündigten wir das Polyfilling der fetch()-API im Browser an. Heute wurde dieses Polyfilling auch auf die Node.js-Umgebung ausgeweitet.

Praktisch bedeutet das, dass Sie keinen serverseitigen Fetch-Polyfill mehr benötigen (z.B. isomorphic-unfetch oder node-fetch), da Next.js fetch() automatisch in allen Umgebungen bereitstellt.

Beispielsweise bei der Verwendung von getStaticProps, das von Next.js zur Build-Zeit ausgeführt wird:

pages/blog.js
export async function getStaticProps() {
  // fetch muss nicht mehr aus isomorphic-unfetch importiert werden
  const res = await fetch('https://.../posts');
  const posts = await res.json();
 
  return {
    props: {
      posts,
    },
  };
}
 
function Blog({ posts }) {
  // Rendern der Posts...
}
 
export default Blog;

Integrierte Web Vitals-Berichterstattung

Letzte Woche stellte das Google Chrome Team Core Web Vitals vor. Core Web Vitals sind Qualitätssignale, die entscheidend für eine großartige UX im Web sind und auf denen die bekannten Lighthouse-Reports aufbauen.

Die Verfolgung dieser Metriken ist äußerst nützlich, wenn Ihre Website oder Webanwendung so schnell wie möglich sein soll, was eines der Kernziele von Next.js ist.

Das Chrome-Team hat eine Core Web Vitals Chrome-Erweiterung veröffentlicht, die Ihnen als Entwickler visuelles Feedback zur Leistung Ihrer Seiten gibt.

Bei der Entwicklung von Produktions-Webanwendungen möchten Sie auch wissen, wie Ihre Seite für Besucher und (potenzielle) Kunden performt. Sie möchten möglicherweise sogar die Verbesserung oder Verschlechterung dieser Metriken über die Zeit verfolgen, um zu sehen, ob Ihre Änderungen die gewünschte Auswirkung auf Ihre Zielgruppe haben.

Um die Berichterstattung von Core Web Vitals an Ihren Analytics-Service zu unterstützen, haben wir in Zusammenarbeit mit Google eine neue Methode namens reportWebVitals eingeführt, die aus pages/_app.js exportiert werden kann:

pages/_app.js
// Wird einmal für jede zu berichtende Metrik aufgerufen.
export function reportWebVitals(metric) {
  // Diese Metriken können an jeden Analytics-Service gesendet werden
  console.log(metric);
}
 
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
 
export default MyApp;

Um diese Methode in Kombination mit Ihrem Analytics-Service zu nutzen, lesen Sie den Abschnitt "Ergebnisse an Analytics senden" in der Dokumentation. Wenn Sie mehr über Core Web Vitals erfahren möchten, besuchen Sie web.dev/vitals.

Absolute Imports und Aliases

Wenn Sie an einem großen Projekt arbeiten, könnten einige Ihrer import-Anweisungen unter dem ../../../-Spaghetti leiden:

import Button from '../../../../components/button';

In solchen Fällen möchten Sie möglicherweise absolute Imports anstelle relativer Imports verwenden. Angenommen, das components-Verzeichnis existiert im Root, könnten import-Anweisungen so aussehen:

import Button from 'components/button';

Wir freuen uns, bekannt zu geben, dass Next.js 9.4 das Einrichten absoluter Imports für JavaScript- und TypeScript-Projekte super einfach macht. Alles, was Sie tun müssen, ist die baseUrl-Konfiguration zu jsconfig.json (JS-Projekte) oder tsconfig.json (TS-Projekte) hinzuzufügen.

jsconfig.json / tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

Dies ermöglicht absolute Imports von . (dem Root-Verzeichnis). Es integriert sich auch mit VSCode und anderen Editoren und unterstützt Code-Navigation und andere Editor-Features.

Hinweis: Wenn Sie zuvor Ihre Webpack-Modul-Alias-Konfiguration geändert haben, um absolute Imports zu ermöglichen, kann diese Konfiguration jetzt entfernt werden.

Darüber hinaus unterstützt Next.js 9.4 auch die paths-Option, die es ermöglicht, benutzerdefinierte Modul-Aliases zu erstellen. Beispielsweise erlaubt Folgendes die Verwendung von @/design-system anstelle von components/design-system:

jsconfig.json / tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/design-system/*": ["components/design-system/*"]
    }
  }
}

Sie können Ihren Alias dann wie folgt verwenden:

// Importiert 'components/design-system/button'
import Button from '@/design-system/button';

Sie müssen baseUrl angeben, wenn Sie paths verwenden. Mehr über die paths-Option erfahren Sie in der TypeScript-Dokumentation.

Konfigurierbare Sass-Unterstützung

Als die integrierte Sass-Unterstützung in Next.js 9.3 eingeführt wurde, erhielten wir das Feedback, dass ein Teil der Benutzer den Sass-Compiler konfigurieren wollte, z.B. um includePaths zu konfigurieren.

Dies ist jetzt möglich durch Verwendung des sassOptions-Keys in next.config.js:

next.config.js
const path = require('path');
 
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
};

Verbesserte Log-Ausgabe

Wir haben die Kommandozeilenausgabe neu gestaltet, um konsistenter zu sein und weniger redundante Daten wie die Deployment-URL oder Warten auf den Start des Entwicklungsservers auszugeben. Wir haben auch den Abstand der Nachrichtentypen vereinheitlicht, sodass sie nicht mehr von Zeile zu Zeile springen.

Ausführung von next dev in Versionen vor 9.4

Ausführung von next dev in 9.4

Community

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

  • Wir haben über 1066 unabhängige Mitwirkende.
  • Auf GitHub wurde das Projekt über 48.000 Mal mit einem Stern versehen.

Treten Sie der Next.js-Community auf GitHub Discussions bei. Discussions ist ein Community-Bereich, der es Ihnen ermöglicht, sich mit anderen Next.js-Nutzern zu verbinden und Fragen zu stellen.

Wenn Sie Next.js verwenden, können Sie gerne Ihre Projekt-URL teilen mit der Community.

Wir sind unserer Community und allen externen Feedbacks und Beiträgen dankbar, die diese Version mitgestaltet haben.