Wähle App-Typ und Host und erhalte Build-Befehl, Output-Ordner und die Rewrite-Datei, die 404-Fehler beim Neuladen auf Vercel, Netlify, Cloudflare und GitHub Pages verhindert.
Um eine React-App zu deployen, führst du den Production-Build aus und übergibst den Output-Ordner an einen Host: dist bei Vite, out bei einem statischen Next.js-Export. Single Page Apps brauchen zusätzlich einen Rewrite, der unbekannte Pfade an index.html weiterleitet, sonst liefert das Neuladen eines Deep Links einen 404. Eine vollständige Next.js-App braucht einen Host, der Node.js ausführt.
Build-Output nach App-Typ
Die meisten gescheiterten React-Deployments haben eine von drei Ursachen: den falschen Output-Ordner, einen fehlenden Rewrite für clientseitige Routen oder eine Next.js-Funktion, die einen Server braucht, aber auf einem statischen Host landet. Wähle unten deinen App-Typ und deinen Host, um die genaue Einstellung und Datei für diese Kombination zu sehen, jeweils aus der Dokumentation des Hosts übernommen.
Der Router läuft im Browser, aber beim Neuladen fragt der Browser den Server nach einer Datei wie /about/index.html, die es nicht gibt. Ein Rewrite, der für unbekannte Pfade index.html zurückgibt, lässt den Router wieder übernehmen. Jeder Host hat seine eigene Syntax für diese Regel.
Nicht, wenn dein Build keine 404.html auf oberster Ebene enthält. Laut der Cloudflare-Dokumentation behandelt Pages das Projekt dann als Single Page App und liefert für jeden Pfad, der keine echte Datei ist, den Root-Index aus.
Nur als statischen Export mit output: 'export'. GitHub Pages liefert Dateien aus und kann den Next.js-Server nicht ausführen, daher stehen dort Funktionen wie Server Actions, Cookies, Rewrites und Rendering auf Abruf nicht zur Verfügung.
Ein Redirect schickt den Browser zu einer neuen URL, wodurch sich die Adresszeile ändert. Ein Rewrite liefert eine andere Datei aus, behält aber die angefragte URL bei, und genau das braucht eine Single Page App. Netlify kennzeichnet einen Rewrite mit dem Status 200.
Lege sie in den Projekteinstellungen des Hosts fest, nicht in einer committeten .env-Datei. Denk daran, dass Variablen, die an den Browser ausgeliefert werden, öffentlich sind. Schlüssel, die privat bleiben müssen, gehören auf einen Server oder in Serverless Functions.
Wo die Catch-all-Regel hingehört (laut Dokumentation der Hosts, Oktober 2026)
Dieselbe Regel wie die einzeilige _redirects-Datei. Der Status 200 behält die Adresse bei, die der Besucher angefragt hat.
Angepasst aus dem Workflow im Deploy-Guide von Vite (der jede Action auf einen Commit festlegt). Er baut bei jedem Push auf main und veröffentlicht dist. Aktiviere GitHub Actions als Quelle unter Settings, dann Pages.
Importiere das Repository; Vercel erkennt Vite. Lege diese Datei im Projektstamm ab, damit Deep Links die App laden.
Build-Befehl npm run build, Publish-Verzeichnis dist. Speichere diese Zeile als public/_redirects, damit Vite sie nach dist kopiert.
Verbinde das Repository und wähle das Vite-Preset. Solange dist keine 404.html auf oberster Ebene enthält, ist keine Regel nötig, weil Pages dann für unbekannte Pfade den Root-Index ausliefert.
Setze base auf den Namen deines Repositorys, baue mit GitHub Actions und veröffentliche dist. GitHub Pages unterstützt eine eigene 404.html, aber keine Rewrite-Regeln. Ein gängiger Workaround ist daher, index.html nach dem Build nach 404.html zu kopieren; diese Deep Links laden dann mit dem Status 404.
Vercel baut Next.js direkt, daher ist ein statischer Export hier optional. Behalte ihn nur, wenn du überall dieselben Dateien haben möchtest.
Setze das Publish-Verzeichnis auf out. Jede Route hat bereits ihre eigene HTML-Datei, daher ist kein Catch-all-Rewrite nötig.
Verwende npm run build mit dem Output-Verzeichnis out. Der Export enthält eine 404.html, daher liefert Pages diese für fehlende Pfade statt der Startseite aus.
Ein statischer Export ist der einzige Weg, Next.js hier zu betreiben. Wenn die Website unter einem Repository-Pfad liegt, setze basePath passend dazu.
Importiere das Repository und deploye. Vercel ist einer der verifizierten Adapter, die in der Deployment-Dokumentation von Next.js aufgeführt sind.
Netlify betreibt Next.js über eine eigene Integration, die in der Next.js-Dokumentation noch nicht als verifizierter Adapter geführt wird. Prüfe in der Netlify-Dokumentation, ob Funktionen fehlen.
Cloudflare betreibt Next.js auf Workers über eine eigene Integration, ebenfalls noch kein verifizierter Adapter. Folge dem Framework-Guide von Cloudflare statt dem statischen Pages-Ablauf.
Nicht möglich. GitHub Pages liefert nur Dateien aus und kann next start nicht ausführen. Wechsle zu einem statischen Export oder wähle einen Host, der Node.js ausführt.
Vite + React
Statischer Next.js-Export
Vollständige Next.js-App
Vercel
Netlify
Cloudflare Pages
GitHub Pages
Was hast du gebaut?
Wo soll es laufen?
Alle Kombinationen aus App und Host
Kopieren
Kostenlos starten · Keine Kreditkarte nötig