Leistung als Standard mit Next.js

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

Houssein Djirdeh

Next.js ist ein spezielles React-Framework mit einer Reihe von integrierten Leistungsoptimierungen. Der Grundgedanke hinter dem Framework besteht darin, sicherzustellen, dass Anwendungen gestartet werden und so leistungsfähig wie möglich bleiben, indem diese Funktionen standardmäßig enthalten sind.

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

Themen in dieser Anleitung

Next.js bietet zwar standardmäßig eine Reihe von Leistungsoptimierungen, aber in diesen Leitfäden werden diese genauer erläutert und Sie erfahren, wie Sie sie nutzen können, um eine schnelle und leistungsstarke Nutzererfahrung zu ermöglichen.

Es gibt viele Optimierungen, die allgemein von React-Websites hinzugefügt werden können und die auch für Anwendungen funktionieren, die mit Next.js erstellt wurden. Diese werden nicht behandelt, da der Schwerpunkt auf der besonderen Bereitstellung 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 speziell eine UI-Bibliothek. Viele Entwickler fügen zusätzliche Tools wie einen Module Bundler (z. B. Webpack) und einen Transpiler (z. B. Babel) ein, um eine vollständige Build-Toolchain zu erstellen.

In der React-Sammlung haben wir React App erstellen verwendet, um React-Anwendungen schnell 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, das auch zum Erstellen einer neuen React-Anwendung verwendet werden kann, verfolgt einen anderen Ansatz. Sie bietet sofort eine Reihe allgemeiner Optimierungen, die viele Entwickler gerne hätten, aber deren Einrichtung schwierig ist, z. B.:

  • 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

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

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, klicken Sie auf App ansehen und dann auf Vollbild Vollbild.

Beachten Sie, dass ein pages/-Verzeichnis mit einer einzigen Datei erstellt wird: index.jsx. Next.js folgt einem Dateisystem-Routingansatz, 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 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 Seite geladen wird. Damit profitieren Sie von den Vorteilen der automatisierten Codeaufteilung.

Darüber hinaus wird jeder erste Seitenaufbau 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 vom Server 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 „Network“ (Netzwerk) sehen Sie, dass Next.js beim Anfordern einer Seite visuell vollständigen HTML-Code 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

Wortwitz beabsichtigt 😛

In allen anderen Anleitungen dieser Sammlung wird eine bestimmte Next.js-Funktion im Detail erläutert: