Was ist Next.js?

Wer mit React eine Webseite bauen will, muss viele Fragen selbst beantworten: Wie entstehen Unterseiten mit eigenen Adressen? Wo kommen die Daten her? Wie werden Bilder verkleinert, wie wird der Code aufgeteilt, damit die Seite schnell lädt? Next.js ist die gesammelte Antwort auf diese Fragen. Es legt sich als Rahmen um React und bringt alles mit, was aus einer Oberfläche eine vollständige Webseite macht.

Der wichtigste Baustein ist das Rendern auf dem Server. Eine reine React-Anwendung schickt dem Browser zuerst eine fast leere Seite und baut den Inhalt danach per JavaScript auf. Next.js dreht das um: Der Server setzt die Seite fertig zusammen und liefert komplettes HTML aus. Besucher sehen den Inhalt früher, und Suchmaschinen können ihn direkt lesen, ohne auf JavaScript zu warten.

Geschrieben wird Next.js in JavaScript oder besser TypeScript, und wer es einsetzt, schreibt weiterhin React-Komponenten. Neu ist vor allem die Struktur: Jede Datei im Projektordner wird automatisch zu einer Unterseite mit eigener Adresse.

Next.js entscheidet je Seite, wann sie zusammengebaut wird. Eine Leistungsseite, die sich selten ändert, wird schon beim Veröffentlichen fertig erzeugt und liegt dann als schnelle statische Datei bereit. Eine Produktseite mit Lagerbestand entsteht bei jedem Aufruf frisch auf dem Server. Und ein Filter im Katalog läuft im Browser, damit er ohne Neuladen reagiert. Alle drei Wege stecken im selben Projekt und lassen sich mischen.

Dazu kommt Handwerk, das sonst jedes Projekt selbst erledigen müsste: Bilder werden automatisch in der passenden Größe und im modernen Format ausgeliefert, der Code wird je Seite aufgeteilt, sodass der Browser nur lädt, was er gerade braucht, und Metadaten für Suchmaschinen haben feste, gut erreichbare Plätze. Seit der Einführung der Server Components kann ein Teil der Komponenten sogar komplett auf dem Server bleiben und schickt gar kein JavaScript mehr zum Besucher.

Für den Betrieb braucht Next.js einen Server mit Node.js oder einen Hosting-Dienst, der das übernimmt. Es läuft bei Vercel selbst, aber genauso auf deutschen Servern oder im eigenen Container, wenn Daten im Land bleiben sollen.

Next.js passt immer dann, wenn eine Seite zwei Dinge gleichzeitig können muss: gefunden werden und sich wie eine Anwendung anfühlen. Typische Einsatzgebiete sind:

• Firmenwebseiten, die über Google Anfragen bringen sollen statt nur zu existieren
• Produktkataloge mit hunderten Seiten, jede mit eigener Adresse und eigenen Suchbegriffen
• Onlineshops, bei denen Produktseiten indexiert werden und der Warenkorb trotzdem sofort reagiert
• Portale mit öffentlichem Bereich und geschütztem Kundenbereich in einem Projekt
• Ratgeber- und Blogbereiche, die auf Ladezeit und Suchmaschinen ausgelegt sind

Die Webseite, die ihr gerade lest, ist selbst mit Next.js gebaut. Jede Leistungsseite und jeder Blogartikel kommt als fertiges HTML aus dem Server, mit Titel, Beschreibung und strukturierten Daten. Genau diese Bauweise ist der Grund, warum kleine Firmenseiten heute bei Google mit deutlich größeren mithalten können.

Next.js erschien 2016, entwickelt von der Firma, die heute Vercel heißt. Der Ausgangspunkt war eine Lücke: React hatte sich für Oberflächen durchgesetzt, aber der Weg zur vollständigen, schnellen und auffindbaren Webseite blieb Handarbeit. Next.js machte das Rendern auf dem Server zur Grundeinstellung statt zur Spezialaufgabe und traf damit einen Nerv.

Next.js ist ein Werkzeug für Entwickler, kein fertiges Produkt. Ein paar Erwartungen, die es regelmäßig enttäuscht, gehören deshalb in jede ehrliche Erklärung:

• Es ist kein Redaktionssystem: Inhalte pflegt man nicht in Next.js, dafür braucht es zusätzlich ein CMS wie WordPress oder ein Headless-System
• Es garantiert keine gute Platzierung: Next.js schafft die technische Grundlage, Inhalte und Suchbegriffe bleiben eigene Arbeit
• Es ist für reine Anwendungen hinter dem Login mehr Aufwand als nötig, dort reicht reines React
• Es entwickelt sich schnell weiter: größere Versionssprünge brauchen eingeplante Pflege, sonst veraltet das Projekt

Wer diese Grenzen kennt, kann Next.js richtig einordnen: als technisches Fundament, auf dem Inhalte, Design und Pflege aufsetzen.

Die Frage stellt sich bei fast jedem Projekt, und die Antwort hängt an einem Punkt: Muss die Seite gefunden werden? Next.js ist die richtige Wahl, wenn:

• die Seite öffentlich ist und über Google oder KI-Suchen Besucher bringen soll
• viele Unterseiten mit eigenen Adressen existieren, etwa Produkte, Standorte oder Ratgeberartikel
• die Ladezeit zählt, weil Besucher von Werbeanzeigen oder Suchergebnissen kommen
• öffentlicher Auftritt und Kundenbereich in einem Projekt leben sollen

Reines React genügt dagegen für Anwendungen hinter dem Login, etwa ein internes Planungswerkzeug, das niemand über eine Suchmaschine finden soll. Dort bringt das Rendern auf dem Server keinen Nutzen und kostet nur Aufbau. Beide Wege beschreiben wir auf unserer Seite zur Next.js-Entwicklung genauer.

Für Auftraggeber übersetzt sich Next.js in drei spürbare Dinge: Die Seite lädt schnell, sie taucht mit jeder Unterseite in Suchergebnissen auf, und sie lässt sich später zur Anwendung ausbauen, ohne neu anzufangen. Gerade der letzte Punkt spart Geld. Eine Firmenseite, die heute mit fünf Seiten startet, kann im selben Projekt einen Konfigurator, einen Shop oder ein Kundenportal dazubekommen.

Bei den laufenden Kosten ist Next.js unauffällig: keine Lizenzgebühren, Hosting ab wenigen Euro im Monat, bei statischen Seiten sogar auf einfachem Webspace. Einplanen solltet ihr Pflege, denn das Framework bekommt regelmäßig neue Hauptversionen. Und ihr seid nicht an einen Anbieter gebunden: Der Code gehört euch, läuft bei jedem Hoster mit Node.js und kann von jedem React-Entwickler übernommen werden.

Im React-Umfeld ist Next.js längst die Gegenwart. Das React-Team empfiehlt für neue Projekte ausdrücklich ein Framework und arbeitet bei neuen Funktionen wie den Server Components direkt mit Vercel zusammen. Wer heute eine auffindbare React-Seite baut, landet in den meisten Fällen bei Next.js, und daran wird sich auf absehbare Zeit wenig ändern.

Eine ehrliche Einordnung nennt auch die Abhängigkeit: Hinter Next.js steht mit Vercel eine einzelne Firma, die damit Geld verdient. Das treibt die Entwicklung, bindet sie aber auch an deren Interessen. Der Code selbst bleibt quelloffen unter MIT-Lizenz und läuft überall, wer Next.js einsetzt, kann den Hoster also jederzeit wechseln. Zudem ist die Verbreitung inzwischen so groß, dass ein plötzliches Ende praktisch ausgeschlossen ist.

Interessant wird die Zukunft eher durch die KI-Suche. Systeme wie ChatGPT und die KI-Übersichten von Google lesen am liebsten Seiten mit fertigem HTML und strukturierten Daten. Genau das ist die Bauweise von Next.js, weshalb die Technik durch diese Entwicklung eher wichtiger wird als unwichtiger.