© Teguh Jati Prasetyo/Shutterstock.com
Das Framework Next.js bietet hilfreiche Erweiterungen für React

Erweiterter Horizont


Bei der Arbeit mit React stolpert man früher oder später über Frameworks, die Werkzeuge für Entwickler bereitstellen. Eins dieser Werkzeuge ist Next.js, ein React Framework. Und hier stellt sich schon die erste Frage: Warum brauchen wir ein Framework, das auf einer Bibliothek basiert? Die Antwort hierauf ist eigentlich relativ einfach: Next.js reichert den Funktionsumfang von React um zusätzliche Features an.

Eines der wichtigsten Features von Next.js ist das Server-side Rendering (SSR). React selbst bietet hierfür zwar die Grundlagen, überlässt die konkrete Implementierung jedoch den Entwicklern einer Applikation. Neben SSR erlaubt Next.js außerdem dateibasiertes Routing und Code-Splitting. Alles Optimierungen, die eine rein clientseitige Lösung nicht leisten kann. Und so behauptet Next.js von sich selbst, das passende Framework für eine ganze Reihe von Problemstellungen zu sein, darunter befinden sich beispielsweise statische Webseiten, mobiles Web, PWA und Electron.

Bevor wir uns näher mit Next.js und seinen Features beschäftigen, werfen wir noch kurz einen Blick auf das Ökosystem um das Framework herum, um es besser einordnen zu können. Das Erste, mit dem sich Next.js vergleichen lässt, ist React selbst. React ist als Bibliothek für Benutzerschnittstellen entwickelt und wird als solche direkt im Browser ausgeführt. React stellt die grundlegenden Bausteine für eine komponentenbasierte Architektur zur Verfügung. React arbeitet mit weiteren Werkzeugen wie webpack und Babel, um aus vielen Quellcodedateien eine beziehungsweise wenige optimierte Dateien zu erzeugen, die zum Benutzer ausgeliefert werden. Eine solche React-Applikation wird zwar auf der Kommandozeile gebaut, aber dann statisch über einen Webserver ausgeliefert. Next.js nutzt die Möglichkeiten von React und erweitert sie um eine Reihe von Features. Hierfür wird ein Node.js-Prozess serverseitig ausgeführt, der die Applikation optimiert und zahlreiche Erweiterungen erst ermöglicht. Dieser Prozess wird über die gesamte Laufzeit der Applikation ausgeführt und nicht nur zum Zeitpunkt des Builds. Ein weiteres Werkzeug, das im Zusammenhang mit React-Applikationen immer wieder genannt wird, ist Gatsby. Im Kern handelt es sich hierbei um einen Generator für statische Webseiten. Das bedeutet, dass Gatsby nur während der Entwicklung und zum Bauen der Applikation, nicht aber während der Laufzeit verwendet wird. Die Erzeugung statischer Seiten ist auch mit Next.js möglich, das ist jedoch nicht das Haupteinsatzgebiet des Frameworks.

Das Ziel von Next.js ist es, Ihnen als Entwickler ein möglichst einfaches Werkzeug zur Verfügung zu stellen, das Sie im Idealfall ohne weitere Konfiguration direkt nutzen können. Der Fokus der Entwicklung liegt auf der Optimierung der resultierenden Applikation mit dem Ziel, eine möglichst schnelle Auslieferung an den Client zu gewährleisten.

Die ersten Schritte mit Next.js

Bevor Sie mit der Arbeit mit Next.js starten, müssen Sie zunächst eine Voraussetzung erfüllen: Egal, ob auf dem Entwicklungs- oder Produktivsystem, in jedem Fall muss Node.js installiert sein. Die aktuelle Mindestanforderung ist die Version 10. Sie sollten jedoch zumindest die aktuelle LTS-Version der Plattform installieren, da diese aktiv mit Updates versorgt wird. Ein Bestandteil der Node.js-Plattform ist der Paketmanager npm, den Sie für die Installation von Next.js und aller übrigen Abhängigkeiten Ihrer Applikation benötigen. Alternativ können Sie auch andere JavaScript-Paketmanager wie beispielsweise Yarn verwenden. Diese Paketmanager müssen Sie jedoch zusätzlich auf Ihrem System installieren. Im Zuge dieses Artikels wird npm eingesetzt, die Verwendung der übrigen Paketmanager gestaltet sich jedoch sehr ähnlich dazu.

Beim Set-up der Next.js-Applikation haben Sie zwei Möglichkeiten: Sie können Ihre Applikation entweder über das Kommandozeilenwerkzeug create-next-app oder manuell aufsetzen, wobei die Verwendung des Kommandozeilenwerkzeugs empfohlen wird. Entscheiden Sie sich dennoch für das manuelle Set-up, müssen Sie eine package.json-Datei erzeugen, die npm-Skripte zur Ausführung der Applikation, die Liste der Abhängigkeiten sowie weitere Konfigurationen beinhaltet. Anschließend installieren Sie mit npm die Abhängigkeiten und erzeugen die Komponentenstruktur Ihrer Applikation. Den Prozess des manuellen Set-ups finden Sie in der Dokumentation unter [1].

Analog zu create-react-app, das Sie verwenden können, um eine neue React-Applikation aufzusetzen, gibt es für Next.js das Werkzeug create-next-app. Es kommt nur einmalig im Lebenszyklus bei der Erstellung der Applikation zum Einsatz. Deshalb besteht auch keine Notwendigkeit, dieses Werkzeug auf Ihrem System zu installieren. Aufgrund dieser Art von Werkzeugen gibt es das create-Kommando in npm. Mit dem Befehl npm create next-app <App-Name> können Sie Ihre Applikation initialisieren. npm lädt daraufhin das create-next-app-Paket herunter und führt es aus. Nachdem das Projekt erfolgreich aufgesetzt ist, wird das Paket wieder verworfen. Create-next-app führt die Schritte, die Sie beim manuellen Set-up durchführen müssen, automatisiert durch und stellt Ihnen eine voll funktionsfähige Applikation zur Verfügung, die Sie, nachdem Sie auf der Konsole in das Applikationsverzeichnis gewechselt sind, mit dem Befehl npm run dev starten können. Dieser Befehl sorgt dafür, dass die Komponenten der Applikation im Browser unter der Adresse http://localhost:3000 erreichbar sind. Dabei handelt es sich um eine sogenannte Templateapplikation, die die Grundstruktur für eine Next.js-Applikation beinhaltet und im Browser eine Demoseite anzeigt. Führen Sie die Applikation im Entwicklungsmodus aus, wird die Seite im Browser automatisch neu geladen, sodass Ihre Änderungen sofort wirksam werden. Eine Beispielseite im Browser sehen Sie in Abbildung 1.

springer_next_1.tif_fmt1.jpgAbb. 1: Die Beispielseite im Browser

Next.js erzeugt bei der Initialisierung eine Applikationsstruktur für Sie. Diese besteht im Wurzelverzeichnis aus den Dateien package.json und package-lock.json, die vom Paketmanager zur Verwaltung der Applikation verwendet werden, sowie einer README.md-Datei, in der Sie eine allgemeine Dokumentation festhalten können. Außerdem legt create-next-app noch eine .git-ignore-Datei an, deren Inhalt aus einer Liste von Dateien und Verzeichnissen besteht, die vom Versionskontrollsystem ignoriert werden sollen. Das public-Verzeichnis wird von Next.js statisch ausgeliefert. Hier können Sie beispielsweise Mediendateien speichern. Standardmäßig liegen hier das Favicon und das Zeitlogo.

Das pages-Verzeichnis enthält die einzelnen Seiten der Applikation. Auf das Konzept der Seiten werden wir noch zu sprechen kommen, wenn es um das Thema Routing geht. Das node_modules-Verzeichnis enthält, wie in den meisten JavaScript-Projekten, die durch den Paketmanager installierten Abhängigkeiten. Und im .next-Verzeichnis werden alle Dateien gespeichert, die Next.js selbst für die Ausführung benötigt. Hierunter fällt beispielsweise der Quellcode des Serverprozesses.

Neben dem Standardtemplate von...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang