Leistung als Standard mit Next.js

Next.js übernimmt viele Optimierungen in Ihrer React-App, damit Sie

Houssein Djirdeh

Next.js ist ein spezielles React-Framework mit einer Reihe von integrierten Leistungsoptimierungen. Das Framework soll dafür sorgen, dass Anwendungen möglichst leistungsfähig gestartet werden und bleiben, indem diese Funktionen standardmäßig enthalten sind.

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 zwar standardmäßig eine Reihe von Leistungsoptimierungen, in diesen Anleitungen werden sie jedoch ausführlicher erläutert und Sie erfahren, wie Sie sie verwenden können, um eine schnelle und leistungsstarke Anwendung zu erstellen.

Es gibt viele Optimierungen, die generell auf React-Websites angewendet werden können und auch für mit Next.js erstellte Anwendungen funktionieren. Diese werden nicht behandelt, da der Schwerpunkt auf den 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 mit einem komponentenbasierten Ansatz vereinfacht. React ist zwar leistungsstark, aber vor allem eine UI-Bibliothek. Viele Entwickler verwenden zusätzliche Tools wie einen Modul-Bundler (z. B. webpack) und einen Transformer (z. B. Babel), um eine vollständige Build-Toolchain zu haben.

In der React-Sammlung haben wir Create React App (CRA) verwendet, um schnell React-Apps zu erstellen. CRA stellt eine vollständige Build-Toolchain mit einem einzigen Befehl bereit und vereinfacht so die Einrichtung einer React-Anwendung.

Obwohl einige Standardoptimierungen in CRA integriert sind, bietet das Tool eine einfache und unkomplizierte Einrichtung. Die Entwickler können entscheiden, ob sie die Konfigurationen auswerfen und ändern möchten.

Next.js, mit dem auch eine neue React-Anwendung erstellt werden kann, verfolgt einen anderen Ansatz. Sie bietet sofort eine Reihe gängiger Optimierungen, die viele Entwickler gerne hätten, aber nur schwer einrichten können, z. B.:

  • Serverseitiges Rendering
  • Automatische Code-Spaltung
  • Routen-Prefetching
  • Dateisystem-Routing
  • CSS-in-JS-Styling (styled-jsx)

Einrichten

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

npx create-next-app new-app

Rufen Sie dann das Verzeichnis auf und starten Sie den Entwicklungsserver:

cd new-app
npm run dev

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

  • Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
  • Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.

Beachten Sie, dass ein pages/-Verzeichnis mit einer einzigen Datei erstellt wird: index.jsx. Next.js verwendet ein Dateisystem-Routing, 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 components/-Verzeichnis mit einer einzelnen Komponente namens 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 wird. Das bietet die Vorteile des automatischen Code-Splittings.

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

Auf dem Tab "Vorschau" des Steuerfelds "Network" wird angezeigt, dass Next.js bei Anforderung einer Seite visuell vollständiges HTML zurückgibt.
Auf dem Tab „Vorschau“ im Bereich „Netzwerk“ sehen Sie, dass Next.js bei einer Seitenanfrage visuell vollständiges HTML zurückgibt.

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

Nächste Schritte

Wortspiel beabsichtigt 😛

In allen anderen Anleitungen dieser Sammlung wird eine bestimmte Next.js-Funktion ausführlich behandelt: