Leistung als Standard mit Next.js

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

Houssein Djirdeh

Next.js ist ein 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. Mit CRA ist die Einrichtung einer React-Anwendung ganz einfach, da eine vollständige Build-Toolchain mit einem einzigen Befehl bereitgestellt wird.

Obwohl CRA einige Standardoptimierungen enthält, soll das Tool eine einfache und unkomplizierte Einrichtung bieten. Entwickler können selbst 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 Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.
  • 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 auch 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“ im Bereich „Netzwerk“ sehen Sie, dass Next.js bei einer Seitenanfrage visuell vollständige HTML-Daten 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 Next.js automatisch bietet. Viele sind anpassbar und können für verschiedene Anwendungsfälle modifiziert werden.

Nächste Schritte

Wortspiel beabsichtigt 😛

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