2021 war bisher ein erfolgreiches Jahr für Next.js. Um das leichtgewichtige React-Framework hat sich mittlerweile ein kleines Ökosystem entwickelt und Vercel, das Startup hinter dem Open-Source-Projekt, konnte sich Funding in Form einer Series-B-Finanzierung in Höhe von 40 Millionen Dollar sichern. Höchste Zeit, dem Framework genauer in die Karten zu blicken. Wir listen Gründe, warum Next.js auch in eurem Techstack gut aufgehoben sein könnte.

Next.js wurde im Oktober 2016 in Version 1.0 released. Das Framework für React sollte die Vorzüge von Facebooks populärer View-Library mit Lösungen für deren Nachteile verbinden.

Bis etwa Mitte der Nullerjahre bestand das Web größtenteils aus statischen HTML-Pages – zu dieser Zeit etwa begannen Entwickler:innen zunehmend, ihre Webprojekte mithilfe von PHP robuster und dynamischer zu gestalten. PHP ermöglichte es, große Datenmengen serverseitig zu verarbeiten.

Mit der steigenden Beliebtheit von JavaScript als Sprache des Webs, und dem Aufkommen von Frameworks wie Angular oder React, verlagerte sich der HTML-Rendering-Prozess vom Server auf den Client. Clientseitig gerenderte sogenannte Single-Page-Apps – oder SPA – wurden die Norm. Beim Clientside-Rendering wird beim initialen Request lediglich ein (fast) leeres HTML-Dokument geladen. Weitere Inhalte werden über die interne Applikationslogik und über Schnittstellen bereitgestellt. Das reduziert die Server-Client-Kommunikation und die Belastung des Webservers. Dieser muss die Pages nicht mehr – wie in PHP – rendern, sondern übergibt nur noch strukturierte Daten an den Client, der das Rendern übernimmt.

Bei all den Vorteilen, die diese Entwicklung mit sich brachte, gibt es natürlich auch Nachteile. Wer mit React von Grund auf eine komplette Webanwendung entwickeln will, muss eine ganze Reihe wichtiger Dinge beachten:

Der Code muss gebündelt und transformiert werden. Dafür sind ein Bundler wie Webpack und ein Compiler wie Babel nötig. Die App muss für den Produktiveinsatz mit Eigenschaften wie Code-Splitting optimiert werden. Aus Gründen der Performance – und aus SEO-Gründen – ist es möglicherweise sinnvoll, einige Pages zu pre-rendern. Wer die App mit einer Datenbank verknüpfen will, muss zudem serverseitigen Code schreiben.

Next.js sollte die genannten Punkte vereinfachen – bei gleichzeitiger Aufrechterhaltung der Vorteile Reacts.

Suchmaschinen-Crawler hangeln sich in der Regel an der Objektstruktur eines HTML-Dokuments entlang und indizieren die jeweiligen Inhalte. Stoßen sie dabei auf ein Link-Element, wird die verlinkte Seite von ihnen ebenfalls gescannt. Bei einer SPA wird das initial leere HTML-Dokument dynamisch mit Inhalten befüllt – nachdem die Startseite ohne Inhalt im Suchmaschinenindex gelandet ist.

Next.js löst dieses Problem, indem Seiten nicht leer, sondern mit dem gesamten Inhalt an den Client ausgeliefert werden. So können die Crawler die Inhalte auslesen und indizieren.

Dieser Vorgang wird auch Pre-Rendering genannt. Das heißt, dass Next.js das HTML für jede Page im Voraus bereitstellt, anstatt es clientseitig mit JS zu rendern. Jedes HTML-Element ist mit minimalstem JavaScript assoziiert – gerade so viel wie nötig, um die Seite zu rendern. Erst wenn das HTML geladen ist, wird das zugehörige JS ausgeführt und die Page damit interaktiv. Dieser Prozess wird auch Hydrierung genannt.

Das Framework bietet sowohl die Möglichkeit, Pages statisch zu generieren, als auch Server-Side-Rendering. Entwickler:innen können pro Page entscheiden, welcher Ansatz sinnvoller ist. Apps, die beide Ansätze kombinieren, nennt man auch hybride Apps. Der Unterschied zwischen beiden besteht im Wesentlichen im Zeitpunkt zu dem das für eine Page nötige HTML generiert wird. Bei der empfohlenen Static-Site-Generation wird das HTML zur Build-Time generiert und bei jedem Request wiederverwendet. Beim Server-Side-Rendering wird das HTML bei jedem Request neu generiert. Next.js erlaubt zudem, einzelne Pages einer solchen hybriden App nach Bedarf clientseitig zu rendern.

Pages sind in Next.js einfach React-Komponenten, die wahlweise via .js-, .jsx-, .ts- oder .tsx-Datei im Pages-Ordner exportiert werden. Jede Page verfügt über eine Route, die auf ihrem Dateinamen basiert. Next.js verfügt mit der Link-Komponente über einen Weg, den Wechsel zwischen den einzelnen Pages via JavaScript durchzuführen. Das ist im Vergleich zur Default-Navigation via Browser deutlich schneller.

Auf die untenstehende pages/about.js kann via /about zugegriffen werden.

function About() {

return

About

}
export default About

Dynamisches Routing wird ebenfalls unterstützt. Und auch das Routing in Next.js hat SEO-Vorteile. Es erstellt statische und dynamische Seitenbäume, sodass auch Unterseiten im Suchindex aufgenommen werden können.

Eine gute Developer-Experience ist ein Schlüsselfaktor für den Erfolg eines Frameworks oder Tools. Next.js bietet eine ganze Reihe Features, die Entwickler:innen die Arbeit mit dem Framework einfacher machen:

Next.js regelt das Thema Code-Splitting automatisch für euch. Jede Page eurer Next.js-App wird separat geladen. Das heißt, wenn beispielsweise die Home-Ansicht geladen wird, wird der Code anderer Pages nicht initial ebenfalls mit ausgeliefert. So kann die Home-Ansicht schnell bereitgestellt werden, auch wenn eure App sehr groß ist und über viele Unterseiten verfügt. Dieser Mechanismus führt außerdem dazu, dass die Pages isoliert voneinander funktionieren – und ein Fehler bei einer Komponente setzt nicht die gesamte Anwendung außer Gefecht.

In Next.js ist es möglich, CSS-Dateien aus einer JS-Datei zu importieren. Um ein Stylesheet hinzuzufügen, kann eine CSS-Datei innerhalb von einer Datei pages/_app.js wie folgt importiert werden:

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.

export default function MyApp({ Component, pageProps }) {

return

}

Diese Styles sind global, das heißt, sie wirken sich auf alle Pages und Komponenten einer Next.js-App aus. Um Konflikte zu vermeiden, sollten sie am besten nur innerhalb von pages/_app.js importiert werden.

Im Entwicklungsmodus profitiert ihr so auch beim Bearbeiten eures CSS von Hot Reloading – das heißt, die bearbeiteten Dateien werden zur Laufzeit eingebracht und die Änderungen somit quasi sofort im Browser sichtbar – bei gleichbleibendem Application-State. In Produktion werden alle CSS-Dateien dann zu einer minifizierten .css-Datei zusammengeführt. Weil es sich bei Next.js um ein React-Framework handelt, wird natürlich auch jede CSS-in-JS-Bibliothek unterstützt.

Next.js bietet eine Entwicklungsumgebung mit Fast Refresh – das bedeutet, jede Änderung, die ihr an React-Komponenten vornehmt, ist quasi sofort im Browser sichtbar, ohne dass ihr einen manuellen Refresh durchführen müsst. Der State dieser Komponente bleibt erhalten. Next.js aktualisiert jeweils nur den Code innerhalb dieser Datei, alles andere wird nicht neu gerendert. Verfügt die editierte Datei über Exporte, die keine React-Komponenten sind, rendert Fast Refresh sowohl diese Datei als auch jene, die sie importieren. Wenn also beispielsweise Button.js und Modal.js beide theme.js importieren, werden bei einem Edit von theme.js beide neu gerendert.

Zudem verfügt Next.js mit sogenannten API-Routes über einen Weg, mit Serverless Functions eine API zu bauen. Dateien innerhalb des Ordners pages/api verweisen auf /api/* und werden als API-Endpoints anstelle von Pages behandelt.

Für Next.js gibt es ähnlich wie für React ein Tool, das die Installation und Konfiguration übernimmt. Über npx create-next-app können Entwickler:innen so ganz einfach eine basic Next.js-App bootstrappen.

Auch die Dokumentation kann sich sehen lassen. In einem ausführlichen Tutorial lernen Entwickler:innen binnen weniger Stunden, sich in dem Framework zurechtzufinden – React-Kenntnisse vorausgesetzt.

Seit Version 10 bietet Next.js mit seinem Commerce-Kit ein All-in-One-Starter-Kit für die Erstellung performanter E-Commerce-Pages. Vercel, das Startup hinter dem Framework, hat das Kit in Zusammenarbeit mit Bigcommerce entwickelt. Mit wenigen Handgriffen können Entwickler:innen damit einen Onlineshop zusammenklicken – dazu müsst ihr einfach das Repo klonen, deployen und anschließend beliebig nach euren Wünschen anpassen.

Next.js integriert nahtlos mit sogenannten Headless Content-Management-Systemen wie beispielsweise Strapi oder Contentful.

Next.js bietet signifikante Vorteile was die Punkte SEO, Performance, Skalierbarkeit, Sicherheit und Developer-Experience angeht. Gerade wer Next.js in Verbindung mit einem Headless CMS nutzen will, sollte allerdings im Hinterkopf behalten, dass das den Workload für das Entwickler:innenteam möglicherweise vergrößern könnte. Plattformen wie WordPress gelten im Vergleich als zugänglicher für Nutzer:innen ohne Dev-Hintergrund.