Leistung als Standard mit Next.js

Next.js übernimmt viele Optimierungen in Ihrer React-Anwendung, sodass Sie sich nicht darum kümmern müssen.

Houssein Djirdeh

Next.js ist ein React-Framework mit einer Reihe von integrierten Leistungsoptimierungen. Die Hauptidee hinter dem Framework besteht darin, dass Anwendungen standardmäßig so leistungsfähig wie möglich starten und bleiben.

In dieser Einführung werden viele Funktionen des Frameworks kurz und allgemein beschrieben. In den anderen Leitfäden dieser Sammlung werden die Funktionen ausführlicher beschrieben.

Themen in dieser Anleitung

Next.js bietet standardmäßig eine Reihe von Leistungsoptimierungen. In diesen Leitfäden werden sie ausführlicher erläutert und es wird gezeigt, wie Sie damit eine schnelle und leistungsstarke Website erstellen können.

Es gibt viele Optimierungen, die im Allgemeinen für React-Websites hinzugefügt werden können und auch für Anwendungen funktionieren, die mit Next.js erstellt wurden. Diese werden nicht behandelt, da der Schwerpunkt auf den spezifischen Funktionen von Next.js liegt. Weitere Informationen zu allgemeinen React-Optimierungen finden Sie in unserer React-Sammlung.

Wie unterscheidet sich Next.js von React?

React ist eine Bibliothek, die die Erstellung von Benutzeroberflächen mithilfe eines komponentenorientierten Ansatzes erleichtert. React ist zwar leistungsstark, aber speziell eine UI-Bibliothek. Viele Entwickler verwenden zusätzliche Tools wie einen Modul-Bundler (z. B. webpack) und einen Transpiler (z. B. Babel), um eine vollständige Build-Toolchain zu erhalten.

In der React-Sammlung haben wir Create React App (CRA) verwendet, um React-Anwendungen schnell zu erstellen. CRA vereinfacht die Einrichtung einer React-Anwendung, da mit einem einzigen Befehl eine vollständige Build-Toolchain bereitgestellt wird.

Obwohl in CRA einige Standardoptimierungen enthalten sind, soll das Tool eine einfache und unkomplizierte Einrichtung ermöglichen. Entwickler können entscheiden, ob sie die Konfigurationen auswerfen und selbst ändern möchten.

Next.js, das auch zum Erstellen einer neuen React-Anwendung verwendet werden kann, verfolgt einen anderen Ansatz. Es bietet sofort eine Reihe gängiger Optimierungen, die viele Entwickler gerne hätten, aber nur schwer einrichten können, z. B.:

  • Serverseitiges Rendering
  • Automatisches Code-Splitting
  • Prefetching von Routen
  • Dateisystem-Routing
  • CSS-in-JS-Stile (styled-jsx)

Einrichten

Führen Sie den folgenden Befehl aus, um eine neue Next.js-Anwendung zu erstellen:

npx create-next-app new-app

Wechseln Sie dann in das Verzeichnis und starten Sie den Entwicklungsserver:

cd new-app
npm run dev

Die folgende Einbettung zeigt die Verzeichnisstruktur einer neuen Next.js-Anwendung.

  • Klicken Sie auf Remix erstellen, um zu bearbeiten, um das Projekt bearbeitbar zu machen.
  • Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf View App (App ansehen) und dann auf Fullscreen (Vollbild) Vollbild.

Es wird ein Verzeichnis pages/ mit einer einzelnen Datei erstellt: index.jsx. Next.js folgt einem Dateisystem-Routing-Ansatz, bei dem jede Seite in diesem Verzeichnis als separate Route bereitgestellt wird. Wenn Sie in diesem Verzeichnis eine neue Datei erstellen, z. B. about.js, wird automatisch eine neue Route (/about) erstellt.

Komponenten können auch wie in jeder anderen React-Anwendung erstellt und verwendet werden. Es wurde bereits ein components/-Verzeichnis mit einer einzelnen Komponente (nav.js) erstellt, die bereits in index.js importiert wurde. Standardmäßig wird jeder in Next.js verwendete Import nur dann abgerufen, wenn die entsprechende Seite geladen wird. Das bietet die Vorteile der automatischen Codeaufteilung.

Außerdem wird jeder erste Seitenaufbau in Next.js serverseitig gerendert. Wenn Sie den Netzwerkbereich in den Entwicklertools öffnen, sehen Sie, dass die erste Anfrage für das Dokument eine vollständig serverseitig gerenderte Seite zurückgibt.

Auf dem Tab „Vorschau“ im Netzwerkbereich ist zu sehen, dass Next.js visuell vollständigen HTML-Code zurückgibt, wenn eine Seite angefordert wird.
Auf dem Tab „Vorschau“ im Netzwerkbereich ist zu sehen, dass Next.js visuell vollständigen HTML-Code zurückgibt, wenn eine Seite angefordert wird.

Dies sind nur einige der vielen Funktionen, die Next.js automatisch bietet. Viele sind anpassbar und können für verschiedene Anwendungsfälle geändert werden.

Nächste Schritte

Wortspiel beabsichtigt 😛

In allen anderen Leitfäden dieser Sammlung wird eine bestimmte Next.js-Funktion im Detail behandelt: