Was ist Next.js und warum Unternehmen es WordPress vorziehen

Next.js taucht heute in fast jedem Gespräch über eine neue Unternehmenswebsite auf. Agenturen empfehlen es anstelle von WordPress, Entwickler sprechen von „serverseitigem Rendering“, und in Hosting-Angeboten muss man plötzlich nach „Node.js-Support“ suchen. In diesem Leitfaden erklären wir verständlich, was Next.js ist, wie es funktioniert, wofür es geeignet ist und wofür nicht, sowie was es vom Server benötigt. Ohne Fachjargon, wo sich das vermeiden lässt.

Wenn du vor einer konkreten Entscheidung zwischen zwei Technologien stehst, haben wir einen separaten Vergleich: WordPress oder Next.js für eine Unternehmenswebsite. Hier konzentrieren wir uns nur auf Next.js.

Inhaltsverzeichnis

1. Was ist Next.js in einem Satz?
2. Wie unterscheidet sich Next.js von reinem React?
3. Wie rendert Next.js Seiten? Vier Render-Modi
4. Was bietet Next.js noch mit sich?
5. Warum wählen Unternehmen Next.js statt WordPress?
6. Wann ist Next.js eine schlechte Idee?
7. Welchen Hosting benötigt Next.js?
8. Vercel oder eigener Server?
9. Wie starte ich Next.js Schritt für Schritt auf Saplo?
10. FAQ

Was ist Next.js in einem Satz?

Next.js ist ein kostenloses Framework zur Erstellung von Websites und Webanwendungen, das auf der React-Bibliothek basiert und fertiges HTML auf dem Server vorbereiten kann, bevor die Website in den Browser gelangt.

Next.js wird von Vercel entwickelt, der Code ist Open Source (MIT-Lizenz), und die erste Version erschien 2016. Heute ist es eine der beliebtesten Möglichkeiten, Websites in JavaScript zu entwickeln. Bei Saplo installieren wir die Version 16.

Ein Framework ist eine Sammlung fertiger Lösungen und Regeln, die Entwickler mit eigenem Code ergänzen. Routing, das Laden von Daten, die Bildoptimierung oder die Erstellung von Produktions-Builds müssen nicht jedes Mal neu erfunden werden. Next.js bietet all das im Paket.

Für nichttechnische Nutzer ist wichtig: Next.js ist kein Content-Management-System wie WordPress. Es gibt kein Panel, in dem du auf „Eintrag hinzufügen“ klicken kannst. Es ist ein Entwicklertool. Inhalte werden aus Dateien, einer Datenbank oder einem separaten CMS bereitgestellt (dazu später).

Worin unterscheidet sich Next.js von React?

React ist eine Bibliothek zum Erstellen von Benutzeroberflächen: Schaltflächen, Formulare, Listen oder ganze Ansichten. React allein beantwortet jedoch nicht die Fragen, die bei einer echten Website auftauchen:

• wie du Unterseiten und URLs organisierst,
• woher und wann die Daten geladen werden,
• wie Google Inhalte statt einer leeren Anzeige sieht,
• wie du einen Production-Build erstellst und startest.

Eine klassische React-Anwendung, eine sogenannte SPA, sendet fast eine leere HTML-Datei und ein JavaScript-Paket an den Browser. Erst der Browser setzt daraus die Seite zusammen. Für Nutzer bedeutet das einen weißen Bildschirm für einen Bruchteil einer Sekunde oder länger auf einem schwachen Smartphone. Für Suchmaschinen bedeutet es zusätzliche Arbeit, da die Inhalte erst nach der Ausführung der Skripte erscheinen.

Next.js ergänzt React um eine serverseitige Ebene. Die Seite erreicht den Browser bereits mit Inhalt, während interaktive Elemente kurz darauf „lebendig“ werden. Daher ist Next.js besonders beliebt in Projekten, bei denen SEO und die Geschwindigkeit der ersten Darstellung wichtig sind.

Wie Next.js Seiten rendert? Vier Render-Modi

Das ist das Wichtigste, was du verstehen musst, denn davon hängt auch die Wahl des Hostings ab. Mit Next.js kannst du für jede Unterseite eine andere Renderweise auswählen.

Render-Modus	Wann HTML erzeugt wird	Gut geeignet für
Statische Seite (SSG)	einmal beim Erstellen des Projekts	Startseite, „Über uns“, Angebot, Blogbeiträge
Serverseitiges Rendering (SSR)	bei jedem Aufruf durch den Nutzer	Warenkorb, Kundenbereich, Suchergebnisse
Inkrementelles Rendering (ISR)	einmal und danach in regelmäßigen Abständen im Hintergrund	Produktkatalog, Preisliste, Neuigkeiten
Rendering im Browser (CSR)	erst beim Aufruf durch den Nutzer	Diagramme, Editoren, Inhalte nach der Anmeldung

In der Praxis kombiniert eine Unternehmenswebsite diese Render-Modi. Die Unternehmensbeschreibung ist statisch und lädt sofort. Die Produktliste wird alle paar Minuten aktualisiert. Der Kundenbereich wird bei Bedarf gerendert, weil jeder dort etwas anderes sieht.

Seit Next.js Version 13 gibt es außerdem den sogenannten App Router und Server Components: Komponenten, die ausschließlich auf dem Server ausgeführt werden und ihren Code nicht an den Browser senden. Weniger JavaScript beim Nutzer bedeutet eine schnellere Seite, besonders auf Smartphones.

Was bietet Next.js noch?

Neben dem Rendern löst das Framework mehrere typische Probleme, die du in reinem React selbst zusammensetzen musst:

• Routing aus Dateien. Das Verzeichnis app/oferta/page.js wird automatisch zur Adresse /oferta. ganz ohne Konfiguration.
• Bildoptimierung. Die Komponente next/image verkleinert Bilder automatisch, liefert moderne Formate aus und lädt sie erst, wenn sie auf dem Bildschirm erscheinen.
• Eigene API. Im selben Projekt kannst du Endpunkte schreiben, zum Beispiel für ein Kontaktformular oder einen Zahlungs-Webhook. Ein separates Backend ist nicht nötig.
• SEO-Metadaten. Titel, Beschreibungen, Open Graph-Tags und die Sitemap werden für jede Unterseite im Code festgelegt.
• Schriften und Skripte. Integrierte Mechanismen laden Schriften ohne Textsprünge und verzögern externe Skripte.
• Schnelles Builden. In Version 16 ist Turbopack das Standard-Buildwerkzeug und deutlich schneller als das frühere Webpack.

Warum Unternehmen Next.js statt WordPress wählen?

Am häufigsten werden vier Argumente angeführt.

1. Geschwindigkeit ohne zusätzliche Plugins. WordPress startet bei jedem Seitenaufruf PHP und fragt die Datenbank ab, sofern kein Cache eingerichtet wurde. Bei Next.js ist eine statische Unterseite eine fertige Datei. Gute Werte bei PageSpeed und Core Web Vitals lassen sich leichter erzielen. Die Gründe, warum WordPress langsam läuft, haben wir im Artikel Läuft WordPress langsam? 9 Gründe beschrieben.

2. Kleinere Angriffsfläche. Es gibt kein Admin-Panel /wp-admin, das Bots täglich angreifen, und auch keine Dutzende von Plugins verschiedener Autoren. Bei einer statischen Website gibt es praktisch nichts zu hacken.

3. Gestaltungsfreiheit. Die Website ist weder auf ein Theme noch auf einen Page Builder beschränkt. Für Marken, die einen besonderen Look, Animationen oder eine Anbindung an ihr eigenes System wünschen, macht das einen großen Unterschied.

4. Website und Anwendung in einem. Wenn neben einer Visitenkarte ein Konfigurator, ein Rechner, ein Kundenportal oder ein Shop mit eigener Logik laufen soll, übernimmt Next.js all das in einem einzigen Projekt.

Auch das headless-Modell gewinnt zunehmend an Bedeutung: Inhalte werden in einem komfortablen Panel (z. B. Directus, Strapi oder sogar WordPress, das ausschließlich als Backend dient) erfasst und von Next.js angezeigt. Die Redaktion hat ihr eigenes Panel, während Besucher eine schnelle Website erhalten. Auf Saplo lassen sich Directus und Next.js parallel in einer Box betreiben.

Wann ist Next.js die falsche Wahl?

Ehrlich gesagt: Das ist nicht immer sinnvoll. Next.js eignet sich vor allem dann nicht, wenn:

• Inhalte von einer nichttechnischen Person bearbeitet werden sollen und das Budget kein CMS vorsieht. Ohne Dashboard ist jede Textänderung eine Aufgabe für einen Entwickler,
• du eine typische Funktion für den sofortigen Einsatz brauchst. Reservierungen, Formulare sowie ein Shop mit polnischen Zahlungsarten und Versanddiensten gibt es in WordPress als fertige Plugins. In Next.js ist das normalerweise Aufgabe eines Entwicklers,
• du niemanden hast, den du um Änderungen bitten kannst. Mit WordPress kommen viele Menschen zurecht, mit React-Code deutlich weniger,
• die Website nur eine einfache Visitenkarte ohne Ambitionen ist. Dann gleicht der Geschwindigkeitsvorteil die höheren Entwicklungskosten nicht aus.

Einen einfachen Online-Shop bringt man am schnellsten mit einer fertigen Engine an den Start. Wir haben das im Beitrag Was ist WooCommerce beschrieben.

Welchen Hostinganbieter benötigt Next.js?

Hier wundern sich viele. Next.js ist eine Node.js-Anwendung und kein Bündel aus PHP-Dateien. Daraus ergeben sich zwei Szenarien:

Vollständig statische Version (Einstellung output: 'export'). Next.js erzeugt fertige HTML-, CSS- und JS-Dateien. Ein beliebiger Dateiserver genügt, sogar einfaches Hosting. Du verlierst jedoch SSR, ISR, eine eigene API und die Bildoptimierung auf dem Server.

Vollständige Version. Du benötigst einen im Hintergrund laufenden Node.js-Prozess, der Anfragen beantwortet. Davor brauchst du einen Webserver (z. B. nginx), ein SSL-Zertifikat und etwas, das den Prozess nach einem Ausfall oder einem Neustart der Maschine wieder hochfährt. Klassisches Shared-Hosting mit PHP lässt dies normalerweise nicht zu.

Die Mindestanforderungen sind bescheiden. In unserem Next.js-Rezept haben wir 512 MB RAM und 2 GB Speicherplatz pro Anwendung angesetzt. Mehr Arbeitsspeicher ist besonders beim Bauen (npm run build) größerer Projekte nützlich, weil die Speichernutzung dann am höchsten ist.

Vercel oder eigener Server?

Vercel, der Entwickler von Next.js, bietet eine eigene Hostingplattform an, auf der das Framework „am nativsten“ läuft. Es lohnt sich jedoch, zwei Dinge zu wissen:

• Der kostenlose Hobby-Tarif ist für nichtkommerzielle Nutzung gedacht. Die Website eines Unternehmens sollte auf einem kostenpflichtigen Tarif laufen, der pro Teammitglied abgerechnet wird,
• Bei höherem Traffic kommen Gebühren für Datenübertragung, Funktionsaufrufe und Bildoptimierung hinzu, sodass die Rechnung mit der Popularität der Website wächst.

Ein eigener Server oder Container bietet feste, planbare Kosten und die volle Kontrolle über die Daten (Server in der EU). Im Gegenzug muss sich jemand um Node.js, nginx, SSL und automatische Neustarts kümmern. Die detaillierte Kostenaufstellung sparen wir uns für einen separaten Artikel, aber das Prinzip ist einfach: Je höher der Traffic und je größer das Team, desto rentabler ist ein festes Abonnement.

Wie startest du Next.js auf Saplo Schritt für Schritt?

Auf Saplo ist Next.js eine fertige Anwendung im App-Katalog. Du musst keinen Server konfigurieren: Der Node.js-Prozess läuft unter Aufsicht und startet nach einem Absturz selbst neu, nginx leitet den Traffic dorthin, und das SSL-Zertifikat wird automatisch ausgestellt.

Schritt 1. Wähle einen Tarif. Eine Next.js-Seite passt in Box S (1 GB RAM, 15 GB SSD, 27 € pro Jahr). Wenn du über SSH arbeiten oder größere Projekte bauen möchtest, wähle Box M (2 GB RAM, 30 GB SSD, 65 € pro Jahr), denn bei Box M ist SSH-Zugriff verfügbar. Der Preis für das erste Jahr entspricht dem Verlängerungspreis. Anwendungen und Domains sind in jedem Tarif unbegrenzt. Die Tarife kannst du in der Preisliste vergleichen.

Schritt 2. Füge die Anwendung hinzu. Wähle im Dashboard Next.js aus dem App-Katalog. Wenn du noch keinen Code hast, richtet Saplo ein Startprojekt ein (create-next-app), baut es und startet es, sodass du sofort eine funktionierende Seite siehst.

Schritt 3. Verbinde eine Adresse. Zu Beginn erhältst du eine Subdomain *.saploapp.pl mit SSL. Deine eigene Domain fügst du im Dashboard hinzu und legst die DNS-Einträge anhand der Hinweise fest.

Schritt 4. Lade deinen eigenen Code über Git hoch. Erzeuge die Konfigurationsdatei mit dem Befehl saplo init, füge sie zum Repository hinzu und verbinde das GitHub-Repository in den Anwendungsdetails (Anwendung „Saplo Deploy“). Von da an löst jeder git push in den Produktionsbranch (standardmäßig main) automatisch npm install, den Build und den Neustart aus. Das dauert meist 1 bis 3 Minuten, und das Ergebnis siehst du als grünen oder roten Punkt neben dem Commit auf GitHub. Details findest du in der Git Deploy-Dokumentation.

Schritt 5. Umgebungsvariablen. API-Schlüssel, Datenbankadressen und Geheimnisse legst du im Dashboard als Variablen fest, nicht im Code des Repositorys.

Hast du deine Next.js-Seite bereits auf Vercel oder einem anderen Server? Die Migration zu Saplo ist bei jedem Tarif inklusive.

FAQ

Ist Next.js kostenlos?

Ja. Next.js ist eine Open-Source-Software unter der MIT-Lizenz und kann ohne Gebühren kommerziell genutzt werden. Es fallen ausschließlich Kosten für das Hosting an, auf dem die Website läuft.

Ist Next.js gut für SEO?

Ja, das ist einer seiner Hauptvorteile. Dank der serverseitigen Generierung von HTML oder der Generierung während des Builds erhält die Suchmaschine sofort den vollständigen Inhalt, während das schnelle Laden die Core Web Vitals verbessert. Das Framework ersetzt jedoch keine guten Inhalte und korrekten Metadaten.

Muss ich React kennen, um Next.js zu nutzen?

Ja, wenn du eine Website entwickeln willst, denn Next.js ist React mit Extras. Nein, wenn du eine fertige Website nutzen willst: Wenn die Inhalte aus dem CMS-Panel kommen, muss die Redaktion keinen Code anfassen.

Wird Next.js auf normalem Shared Hosting funktionieren?

Nur als statischer Export, ohne serverseitiges Rendering, ISR und eine eigene API. Die vollständige Version benötigt einen laufenden Node.js-Prozess, also einen Server, einen Container oder eine Plattform, die ihn ausführt. Bei Saplo ist jeder Box ein eigener Container, in dem Next.js in der vollständigen Version läuft.

Wie viel RAM-Speicher benötigt Next.js?

Eine kleine oder mittelgroße Website benötigt etwa 512 MB RAM. Das Bauen des Projekts verbraucht die meisten Ressourcen, daher sollte man bei großen Anwendungen einen Puffer einplanen, zum Beispiel Box M mit 2 GB RAM.