Next.js 8.0.4

Wir freuen uns, die produktionsreife Version von Next.js 8.0.4 vorzustellen:

• Verbesserte Build-Performance
• Deterministische Builds
• Kleinere Client-Laufzeitumgebung
• Kleinere Serverless-Funktionen
• Standard-Viewport-Tag
• Verbesserungen am Lernleitfaden

Wie immer haben wir uns bemüht, sicherzustellen, dass alle diese Vorteile vollständig abwärtskompatibel sind. Für die meisten Next.js-Anwendungen müssen Sie lediglich folgendes ausführen:

npm i next@latest react@latest react-dom@latest

Build-Performance

Next.js-Builds sind jetzt deterministischer, was bedeutet, dass bei unverändertem Code das Build-Ergebnis jedes Mal identisch ist.

Dadurch können mehr Teile des Build-Prozesses zwischengespeichert werden, was zu schnelleren Neubuilds von Produktionscode nach dem ersten Build führt.

Unsere Messungen haben gezeigt, dass ein erheblicher Teil der Build-Zeit für die Minimierung von JavaScript aufgewendet wird. Da das Build-Ergebnis jetzt deterministischer ist, ist die Wahrscheinlichkeit größer, dass die minimierte Datei bereits im Cache vorhanden ist.

Benutzer, die auf Vercel deployen, profitieren automatisch von diesen Cache-Verbesserungen.

Wir haben unser serverseitiges next/dynamic-Manifest vereinfacht, sodass es nur noch Module enthält, die asynchron geladen werden. Dieses vereinfachte Manifest ist schneller zu berechnen und erzeugt weniger JavaScript.

CircleCI-Benutzer sollten schnellere Build-Zeiten feststellen. Zuvor wurden Worker aufgrund der CircleCI-Umgebung, die die Anzahl der verfügbaren CPUs nicht korrekt widerspiegelte, überlastet. Next.js erkennt jetzt CircleCI und legt eine angemessene Anzahl von CPUs basierend auf den verfügbaren Ressourcen fest.

Kleinere Laufzeitumgebung

Next.js erzeugt jetzt 5,58 KB weniger clientseitiges JavaScript und hat eine kleinere HTTP-Nutzlast als die vorherige Version.

withRouter hängt nicht mehr von hoist-non-react-statics ab, wodurch die Bundle-Größe um 3 KB reduziert wird. withRouter wird weiterhin getInitialProps hoisten, aber keine anderen statischen Eigenschaften.

Das next/babel-Preset wurde optimiert, um schlankeres und schnelleres JavaScript zu erzeugen.

Der X-Powered-By-Header wurde entfernt, wodurch die HTTP-Nutzlast verringert wird. Eine Umfrage in der Community ergab, dass der Header in der Produktion oft deaktiviert wurde, daher haben wir uns entschieden, ihn zu entfernen. Dies bedeutet auch, dass die Option poweredByHeader aus Ihrer next.config.js entfernt werden kann, falls sie in Ihrem Projekt aktiviert war.

Wir haben viele Optimierungen in der Next.js-Abhängigkeitsstruktur und im gesamten Codebase vorgenommen und konnten dadurch jede Serverless-Funktion um 44 KB (5,44 KB gzip) verkleinern.

Die Größe der Serverless-Funktionen wirkt sich direkt auf die Startleistung aus - kleinere Funktionen bedeuten einen schnelleren Start.

Nach der Veröffentlichung von Next.js 8 erhielten wir Berichte von einer kleinen Anzahl von Benutzern, die Probleme beim Importieren von React-Komponenten außerhalb von Next.js hatten, z.B. in ihren Testsuites. Dies wurde durch Imports von next verursacht, die innerhalb der Next.js-Codebase in die richtige Datei umgeschrieben wurden. Diese Optimierung wurde jedoch für alle Benutzer des next/babel-Presets angewendet. Die Optimierung wurde in den Next.js-Build-Prozess selbst verschoben, sodass sie nicht mehr mit den Babel-Setups der Benutzer kollidiert.

Standard-Viewport-Meta-Tag

Eines der Ziele von Next.js ist es, die bestmöglichen Standardeinstellungen für die Entwicklung von Webanwendungen bereitzustellen. Um den Aufwand für die Implementierung von CSS-Media-Queries in Next.js zu reduzieren, haben wir eine Änderung vorgenommen.

Standardmäßig handhaben Browser CSS-@media-Queries und Zoomen nicht so, wie man es erwarten würde, was zu unerwarteten Inkonsistenzen bei der Verwendung von CSS-@media-Queries führen kann.

In fast allen Fällen fügten Next.js-Benutzer einen viewport-Meta-Tag zu ihrer Anwendung hinzu, um diese Inkonsistenzen zu beheben.

Ab Version 8.0.4 ist dieser viewport-Tag in den meisten Fällen nicht mehr erforderlich. Wenn der viewport nicht von der Anwendung gesetzt wird, wird ein Standard-Viewport angewendet:

<meta
  name="viewport"
  content="width=device-width,minimum-scale=1,initial-scale=1"
/>

Der Viewport-Tag kann weiterhin mit next/head überschrieben werden:

import Head from 'next/head';
 
function HomePage() {
  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="width=device-width,minimum-scale=0.5,initial-scale=1"
        />
      </Head>
    </>
  );
}
 
export default HomePage;

Ein besonderer Dank geht an Jason Miller für die Zusammenarbeit und Implementierung dieser Änderung.

Neues @next/mdx-Plugin

MDX ermöglicht es, JSX in Markdown-Dokumenten zu verwenden. Sie können reguläre Markdown-Syntax für Inhalte nutzen und React-Komponenten importieren, um das Dokument mit interaktiven und dynamischen Inhalten zu erweitern.

Das Plugin, das MDX-Unterstützung für Next.js bereitstellt, @zeit/next-mdx, wurde in das Next.js GitHub-Repository verschoben und ist jetzt als @next/mdx verfügbar.

Installation:

npm i @next/mdx @mdx-js/loader

Um es für Ihre Next.js-App verfügbar zu machen, erstellen Sie eine next.config.js-Datei und fügen Sie folgendes ein:

const withMDX = require('@next/mdx')();
module.exports = withMDX();

Mit der Zeit werden weitere Next.js-Plugins in das Next.js-Repository verschoben, sodass sie zusammen mit dem Next.js-Core veröffentlicht und von der Next.js-Testsuite getestet werden können. Auf diese Weise können wir sicherstellen, dass Hot Module Replacement, Produktionsbuilds und andere Funktionen gut mit Plugins zusammenarbeiten.

Verbesserungen am Lernleitfaden

Next.js Learn ist eine Schritt-für-Schritt-Anleitung zum Erlernen von Next.js, komplett mit Quizfragen und Beispielen.

Die Website wurde kürzlich mit MDX neu aufgebaut, was das Beitragen einfacher denn je macht. Wir laden jeden ein, zur Learn-Website beizutragen!

Die Website wurde außerdem auf das Next.js Serverless Target aktualisiert, das in Next.js 8 eingeführt wurde, um sicherzustellen, dass die Website für Benutzer weltweit skalierbar und schnell ist.

Wir haben viel Feedback aus der Community zu inhaltlichen Verbesserungen erhalten und haben in den letzten Wochen daran gearbeitet. Next.js Learn enthält jetzt aktualisierte Beispiele und mehr Details in jedem Abschnitt, um die Anleitungen verständlicher zu machen!

Die Next.js Learn Website

Beiträge

Wir sind sehr erfreut über das anhaltende Wachstum der Next.js-Adoption.

• Wir haben über 660 Mitwirkende.
• Auf GitHub wurde das Projekt über 36.150 Mal mit einem Stern versehen.
• Seit der ersten Veröffentlichung wurden über 2.950 Pull Requests eingereicht.

Wir möchten uns bei allen bedanken, die zu dieser Next.js-Version beigetragen haben. Ob durch Beiträge zum Core oder durch die Erweiterung und Verbesserung unseres ständig wachsenden Beispielverzeichnisses, wir schätzen alle Beiträge.

Wenn Sie beginnen möchten, zu Next.js beizutragen, sind Issues mit den Labels good first issue oder help wanted ein guter Ausgangspunkt.

Community

Die Next.js-Community ist auf über 6.000 Mitglieder angewachsen.

GitHub Discussions ist ein Ort, an dem Sie über Next.js diskutieren, Ratschläge zur Problemlösung erhalten und anderen Community-Mitgliedern mit Ihrem Next.js-Wissen helfen können.

Jetzt der Community auf GitHub beitreten!