Ratgeber

Artikel merken

DX, SEO, E-Commerce – darum ist Next.js so beliebt

Das React-Framework Next.js hat mittlerweile endgültig den Mainstream erreicht. Wir haben es genauer unter die Lupe genommen und festgestellt: Für die zunehmende Popularität gibt es gute Gründe.

Lesezeit: 5 Min.

Next.js ist ein leichtgewichtiges Framework für React. (Foto: Vonotna/Shutterstock)

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.

Am Anfang war HTML

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.

Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

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.

SEO-Vorzüge

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.

Für Crawler gibt es bei einer traditionellen SPA nicht viel zu sehen. (Grafik: Grenar/Shutterstock)

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.

Pre-Rendering

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.

Clientseitiges Routing

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.

Developer-Experience

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:

Code-Splitting out of the Box

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.

CSS-, Sass-, und Support für CSS-in-JS

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.

Fast Refresh

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.

API-Routes

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.

Tooling

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.

Doku

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.

E-Commerce

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.

Headless-CMS-Integration

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

Fazit

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.

Das könnte dich auch interessieren

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Digitales High Five
Holger Schellkopf (Chefredakteur t3n)

Anleitung zur Deaktivierung

Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder