Next.js ist ein Meta-Framework für React, das die Firma Vercel 2016 veröffentlicht hat. Es ergänzt React um Routing, Datenabruf und das Erzeugen der Seiten auf dem Server, also um das, was zu einer vollständigen Website noch fehlt.
- Next.js
Ein Framework auf Basis von React, das Seiten auf dem Server oder schon beim Bauen als fertiges HTML erzeugt.
Beispiel: „Der neue Shop läuft auf Next.js, die Produktseiten kommen als fertiges HTML beim Besucher an.“Verwandt: Nuxt, das Gegenstück für Vue.js, und SvelteKit für Svelte.
Abgrenzung zu React: React beschreibt die Oberfläche. Next.js entscheidet, wann und wo sie gerendert wird, und liefert die Adressen der Seiten gleich mit.
Was Next.js zu React hinzufügt
Ein Routing über die Ordnerstruktur: Eine Datei im Verzeichnis app/blog wird unter /blog erreichbar. Dazu kommen Serverfunktionen, Bildoptimierung und ein eingebauter Weg, Daten vor dem Ausliefern einer Seite abzurufen.
Je Seite lässt sich wählen, ob sie bei jedem Aufruf frisch auf dem Server entsteht, einmal beim Bauen als statische Datei oder in festen Abständen neu.
Warum Next.js für SEO wichtig ist
Weil das HTML schon fertig ist, wenn es beim Browser ankommt. Suchmaschinen sehen den Inhalt sofort, und die Seite zeigt etwas an, bevor das JavaScript geladen ist; die Hintergründe stehen unter JavaScript-SEO.
Danach übernimmt React im Browser, ein Schritt, der Hydration heißt. Für Besucher verhält sich die Seite dann wie eine Single Page Application, ohne deren Nachteile beim ersten Laden.
Wie eng Next.js an Vercel hängt
Next.js ist Open Source und läuft auf jedem Server mit Node.js. Einige Funktionen sind aber auf die Plattform von Vercel zugeschnitten und lassen sich anderswo nur mit Mehraufwand nachbauen.
Wer das Hosting frei wählen will, prüft das vor dem Projektstart. In unseren Projekten gehört diese Frage zu jeder Framework-Entscheidung, weil sie sich später kaum noch korrigieren lässt.