© Teguh Jati Prasetyo/Shutterstock.com
Next.js für Fortgeschrittene - API-Routing und Plug-ins

Der zentrale Angelpunkt


Im letzten PHP Magazin haben wir bereits die Grundlagen und die wichtigsten Features von Next.js beleuchtet. In diesem Artikel sehen wir uns einige weitere Features, wie beispielsweise das Ausliefern statischer Dateien, API-Routing oder die Erzeugung statischer Seiten, an und werfen außerdem einen Blick auf das Plug-in-System von Next.js und einige wichtige Plug-ins.

Next.js ist ein Framework für React, das einige Features bietet, die React als Bibliothek fehlen. React fokussiert sich auf die Erzeugung von grafischen Schnittstellen im Web, indem es die hierfür notwendigen Elemente zur Verfügung stellt, aber auch nicht mehr. Das bedeutet aber auch, dass React für einige typische Problemstellungen, die bei einer Single-Page-Applikation auftreten, keine Lösung parat hat. Zu diesen Problemstellungen zählen unter anderem die Validierung von Formularen, zentrales State Management, der Umgang mit Web Components oder Serverside Rendering. Glücklicherweise ist die Community, die sich um React gebildet hat, eine der aktivsten im JavaScript-Umfeld, und so gibt es für nahezu jedes Problem bereits eine Lösung. Und hier reiht sich auch Next.js ein, indem es die Entwicklung von React-Applikationen ein Stück weit vereinfacht und vorgefertigte Lösungen beispielsweise für serverseitiges Rendering (SSR) bietet.

Im vorhergehenden Artikel [1] haben wir eine einfache Einkaufsliste mit Next.js erzeugt. Der Schwerpunkt lag auf der Initialisierung der Applikation, dem Aufbau verschiedener Sichten und der Navigation zwischen diesen Sichten. Die Daten wurden auf einem Webserver persistiert, mit dem die Applikation über die Axios-Bibliothek kommunizierte. Diese Applikation wird uns auch in diesem Artikel als Beispiel dienen, und wir erweitern sie um zusätzliche Features.

API-Routing – Schnittstellen mit Next.js implementieren

Für den Betrieb einer React-Applikation mit Next.js müssen Sie serverseitig immer einen Node.js-Prozess ausführen, der für die Auslieferung der Applikation verantwortlich ist. Dieser kümmert sich dann beispielsweise um SSR. Führen Sie ohnehin einen Serverprozess aus, spricht auch nichts dagegen, mit diesem gleich auch die dynamischen Inhalte Ihrer Applikation auszuliefern.

Ähnlich wie bei den Pages gibt es auch für die APIs eine dateisystembasierte Vereinfachung. So können Sie innerhalb des pages-Verzeichnisses einen neuen Unterordner mit dem Namen api anlegen. Die Dateien und Verzeichnisse dort werden als API-Endpunkte interpretiert. Die Datei muss nur eine F...

Neugierig geworden?

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