Leistung als Standard mit Next.js

Mit Next.js werden viele Optimierungen in Ihrer React-App vorgenommen.

Houssein-Djirdeh

Next.js ist ein durchdachtes React-Framework mit einer Reihe integrierter Leistungsoptimierungen. Die Hauptidee des Frameworks besteht darin, dafür zu sorgen, dass Anwendungen so leistungsstark wie möglich starten und bleiben, indem diese Funktionen standardmäßig enthalten sind.

In dieser Einführung werden viele der vom Framework bereitgestellten Funktionen kurz erläutert. In den anderen Leitfäden in dieser Sammlung werden die Funktionen genauer beschrieben.

Themen in dieser Anleitung

Next.js bietet zwar standardmäßig eine Reihe von Leistungsoptimierungen, aber diese Leitfäden zielen darauf ab, diese genauer zu erläutern und Ihnen zu zeigen, wie Sie damit eine schnelle und leistungsstarke Umgebung schaffen können.

Es gibt viele Optimierungen, die React-Websites hinzugefügt werden können, die auch für Anwendungen geeignet sind, die mit Next.js erstellt wurden. Sie 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 das Erstellen von Benutzeroberflächen mithilfe eines komponentenbasierten Ansatzes vereinfacht. React ist zwar leistungsstark, aber eine UI-Bibliothek. Viele Entwickler fügen zusätzliche Tools wie einen Modul-Bundler (z. B. webpack) und einen Transpiler (z. B. Babel) hinzu, um eine vollständige Build-Toolchain zu erhalten.

In der React-Sammlung haben wir den Ansatz Create React App (CRA) verwendet, um React-Anwendungen schnell hochzufahren. CRA erleichtert das Einrichten einer React-Anwendung, da er mit einem einzigen Befehl eine vollständige Build-Toolchain bereitstellt.

Obwohl einige Standardoptimierungen in die CRA verankert sind, zielt das Tool darauf ab, eine einfache und unkomplizierte Einrichtung zu ermöglichen. Die Entwickler entscheiden, ob sie die Konfigurationen auswerfen und ändern möchten.

Next.js, die auch zum Erstellen einer neuen React-Anwendung verwendet werden kann, verfolgt einen anderen Ansatz. Sie bietet sofort eine Reihe gängiger Optimierungen, die sich viele Entwickler wünschen würden, die sich aber nur schwer einrichten lassen. Dazu gehören:

  • Serverseitiges Rendering
  • Automatische Codeaufteilung
  • Routen-Vorabruf
  • 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

Gehen Sie dann zum Verzeichnis und starten Sie den Entwicklungsserver:

cd new-app
npm run dev

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

  • Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
  • Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.

Ein Verzeichnis pages/ wird mit einer einzelnen Datei erstellt: index.jsx. Next.js folgt einem Routingansatz im Dateisystem, 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 wie jede andere React-Anwendung erstellt und verwendet werden. Es wurde bereits ein Verzeichnis components/ mit der einzelnen Komponente nav.js erstellt, die bereits in index.js importiert wurde. Standardmäßig wird jeder in Next.js verwendete Import nur abgerufen, wenn die entsprechende Seite geladen ist. Dadurch profitieren Sie von den Vorteilen der automatisierten Codeaufteilung.

Außerdem wird jeder erste Seitenaufbau in Next.js serverseitig gerendert. Wenn Sie den Bereich „Netzwerk“ in den Entwicklertools öffnen, können Sie sehen, dass die ursprüngliche Anfrage für das Dokument eine vollständig vom Server gerenderte Seite zurückgibt.

Auf dem Tab „Preview“ (Vorschau) im Steuerfeld „Network“ sehen Sie, dass Next.js beim Anfordern einer Seite visuell vollständigen HTML-Code zurückgibt.
Auf dem Tab „Vorschau“ im Steuerfeld „Netzwerk“ ist zu sehen, dass Next.js beim Anfordern einer Seite visuell vollständigen HTML-Code zurückgibt.

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

Nächste Schritte

Wortspiel beabsichtigt 😛

In jedem anderen Leitfaden dieser Sammlung wird eine bestimmte Next.js-Funktion im Detail behandelt: