Vom Prompt in die Produktion: Eine KI-generierte Next.js-App deployen

Der Vorschau-Link ist der Ort, an dem die meisten KI-gebauten Apps sterben. Die App funktioniert, Sie teilen die Vorschau-URL mit zwei Freunden, und drei Wochen später ist das Projekt aufgegeben — weil eine Vorschau nie das Produkt war. Produktion heißt: Ihre eigene URL, echte Nutzer und Infrastruktur, die nicht davon abhängt, dass Sie einen Browser-Tab offen halten.

Die gute Nachricht: Wenn Ihr Builder ein Standard-Next.js-Projekt generiert hat, ist der Weg in die Produktion kurz und gut ausgebaut. Diese Anleitung nutzt den Ablauf von Massvai, aber das Muster gilt für jeden Builder, der Ihnen echten Code gibt.

Vor dem Deployment: ein 10-Minuten-Audit

Widerstehen Sie dem Drang, zu deployen, sobald die Vorschau richtig aussieht. Prüfen Sie zuerst vier Dinge:

1. Klicken Sie jeden Pfad, den ein Fremder klicken würde. Nicht den Happy Path, den Sie dreißigmal getestet haben — die seltsamen Pfade. Senden Sie leere Formulare ab. Rufen Sie eine Detailseite für etwas auf, das nicht existiert. Wenn die App eine Anmeldung hat, probieren Sie eine Seite im ausgeloggten Zustand. Melden Sie dem Agenten alles, was bricht; ein Fix vor dem Launch kostet eine Iteration, ein Fix danach kostet Nutzer.

2. Inventarisieren Sie Ihre Secrets. Listen Sie jeden externen Dienst auf, mit dem die App spricht — Datenbank, Auth-Anbieter, Zahlungsdienstleister, E-Mail. Jeder hat Schlüssel, und diese Schlüssel müssen in Umgebungsvariablen leben, niemals im Code. Massvai verwaltet Projekt-Umgebungsvariablen explizit und injiziert sie in Deployments; welche Plattform Sie auch nutzen: Stellen Sie sicher, dass der generierte Code aus process.env liest, statt Werte fest zu verdrahten.

3. Trennen Sie Testdaten von echten Daten. Wenn Sie gegen eine Testdatenbank oder Stripe-Testschlüssel gebaut haben, braucht die Produktion eigene Werte. Das ist der häufigste Launch-Tag-Bug überhaupt: Die App funktioniert perfekt mit Test-Zugangsdaten, die niemals echte Nutzer bedienen dürfen.

4. Legen Sie einen Checkpoint an. Sichern Sie exakt die Version, die Sie ausliefern wollen. Wenn Sie nächste Woche weiter iterieren, werden Sie einen bekannten guten Zustand zum Vergleichen wollen — oder zum Zurückrollen.

Schritt 1: Den Code in Ihr eigenes GitHub bringen

Selbst wenn Ihr Builder direkt deployen kann: Synchronisieren Sie das Repository zuerst in Ihr eigenes GitHub-Konto. Das zählt aus drei Gründen: Es ist Ihr Backup, es ist Ihr Übergabepfad, wenn ein Entwickler dazukommt, und es ist die Verbindung zu Vercels Git-basierter Deploy-Pipeline — jeder künftige Push deployt automatisch.

In Massvai ist das ein eingebauter Ablauf: GitHub-Konto verbinden, Repo-Namen wählen, pushen. Verifizieren Sie das Ergebnis, indem Sie das Repo öffnen und prüfen, dass Sie ein normales Next.js-Projekt sehen — ein app/-Verzeichnis, eine package.json, TypeScript-Dateien. Das ist Ihr Vermögenswert.

Schritt 2: Auf Vercel deployen

Vercel ist die Standardantwort für Next.js-Hosting — aus einem unspektakulären, praktischen Grund: Zero-Configuration-Unterstützung für jedes Next.js-Feature (Server Components, API-Routen, Bildoptimierung), ein globales CDN und automatisches HTTPS. Der kostenlose Hobby-Tarif trägt kleine Produktions-Apps problemlos.

Der geführte Ablauf in Massvai verbindet Ihr Vercel-Konto, erstellt das Projekt, überträgt Ihre Umgebungsvariablen und stößt den Build an. Es manuell zu tun ist kaum schwieriger: das GitHub-Repo im Vercel-Dashboard importieren, die Umgebungsvariablen einfügen und auf Deploy klicken.

So oder so ist der erste Build der Moment der Wahrheit. Ein generiertes Projekt, das in der Vorschau sauber baut, baut fast immer auch sauber auf Vercel — aber falls es scheitert, lesen Sie das Log: Der Fehler ist meist eine fehlende Umgebungsvariable, und das Log wird sie beim Namen nennen.

Schritt 3: Eine eigene Domain anbinden

ihre-app.vercel.app funktioniert, aber eine echte Domain verändert, wie Menschen das Produkt behandeln — und sie ist der Punkt, an dem Nicht-Entwickler am häufigsten steckenbleiben. Hier also der komplette Ablauf:

1. Kaufen Sie die Domain bei einem beliebigen Registrar (grob 10–15 $ pro Jahr für eine .com).
2. Fügen Sie sie Ihrem Projekt hinzu (in Massvais Domain-Einstellungen oder im Vercel-Dashboard).
3. Die Plattform zeigt Ihnen ein oder zwei DNS-Einträge — typischerweise einen A-Eintrag oder einen CNAME. Tragen Sie sie im DNS-Panel Ihres Registrars ein.
4. Warten Sie auf die Propagierung — Minuten bis wenige Stunden. HTTPS-Zertifikate werden automatisch ausgestellt, sobald die Einträge auflösen.

Das ist alles. Zu keinem Zeitpunkt ist Serveradministration im Spiel.

Schritt 4: Die erste Woche in Produktion

Der Launch ist eine Startlinie. Drei Gewohnheiten für Woche eins:

• Beobachten Sie echtes Verhalten. Fügen Sie ein leichtgewichtiges Analytics-Tool hinzu und sehen Sie, wohin die Leute tatsächlich gehen — es ist nie dort, wo Sie es erwartet haben. Das wird Ihre Iterations-Roadmap.
• Liefern Sie weiter klein aus. Mit GitHub, das mit Vercel verbunden ist, deployt jede synchronisierte Änderung automatisch. Die Spanne zwischen „Nutzer hat es gemeldet" und „in Produktion behoben" kann unter einer Stunde liegen — und diese Geschwindigkeit ist Ihr größter Vorteil gegenüber etablierten Wettbewerbern.
• Rollen Sie ohne Scham zurück. Schlechtes Deployment? Vercel hält jedes vorherige Deployment einen Klick entfernt, und die Checkpoints Ihres Builders geben Ihnen dasselbe Sicherheitsnetz auf Code-Ebene. Ein Fehler kostet Minuten — trauen Sie sich also etwas.

Der Teil, der wirklich zählt

Keiner dieser Schritte erfordert noch Entwicklerkompetenz — das ist die Veränderung, die KI-App-Builder gebracht haben. Was sie nicht können: das Ding für Sie vor Menschen bringen. Die App in Ihrem Vorschau-Tab ist exakt nichts wert, bis jemand anderes sie benutzt. Deployen Sie sie diese Woche.