v0 von Vercel anwenden: Ein Einsteiger-Tutorial mit Screenshots
Ein kompletter v0.dev-Walkthrough, neu aufgebaut aus einem echten Anfänger-Build — Enhanced Prompt, Element-Selektor, Versionen, One-Click-Deploy auf Vercel, GitHub-Sync und eine Supabase-Datenbank mit Login. Jeder Schritt mit Screenshot.
v0 in Kürze
- v0.dev ist Vercels KI-App-Builder: die App in klarer Sprache beschreiben (oder Screenshot/Figma anhängen) und eine laufende Next.js-App bekommen — Vorschau und Code nebeneinander.
- Enhanced Prompt für dünne Ideen, der Element-Selektor für Einzelkomponenten, die Versionsliste zum Zurückrollen misslungener Iterationen.
- Deploy ist ein Klick auf Vercel, und der GitHub-Sync pusht jede Prompt-Änderung ins Repo — der Code bleibt nie in v0 eingesperrt.
- Echte Daten brauchen die Supabase-Integration: Datenbank aus v0s Einstellungen anlegen, das SQL-Skript ohne die JWT-Zeile ausführen — schon hat die App E-Mail-Login mit nutzerspezifischen Daten.
How to use v0.dev by Vercel For Beginners
Quellvideo von:Code with Nathan12:28
Screenshots stammen aus dem Quellvideo und sind mit Zeitstempel-Deep-Links gekennzeichnet. Der Text basiert auf unserem eigenen, vollständigen Transkript — die Fakten entsprechen der Aufzeichnung.
Dieses Tutorial ist eine unabhängige, illustrierte Zusammenfassung für Leserinnen und Leser. Wer die Creator unterstützen möchte, schaut sich das verlinkte Video auf dem Kanal Code with Nathan an.
Eine App in v0 bauen, Schritt für Schritt
- 1
Auf v0.dev starten
Auf v0.dev ein kostenloses Konto anlegen. In der Seitenleiste liegen Chats und Projekte; das große Prompt-Feld in der Mitte ist der Start. Rundherum Quick Actions — Screenshot klonen, Figma importieren, Landingpages — und der Anhang-Button nimmt Bilder und Figma-Dateien als Design-Eingabe.
Der v0.dev-Composer mit Quick Actions und Modell-Chip.Bei 2:00 ansehen - 2
Die Idee mit Enhanced Prompt erweitern
„Eine Notiz-App“ gibt v0 wenig zu arbeiten. Enhanced Prompt schreibt sie um mit Kernfunktionen, Nutzer-Authentifizierung und responsivem Design. Überspringen, wenn der Prompt schon detailliert ist — die Ausweitung kann die App auch vom eigenen Bild wegführen. Für alltägliche UI ist das mittlere Modell die preiswerte Voreinstellung; large bleibt komplexen Builds vorbehalten.
Enhanced Prompt macht aus einer Zeile eine echte Spezifikation.Bei 2:15 ansehen - 3
Community-Projekte ansehen
Unter dem Composer liegt die Community-Galerie: Portfolios, Landingpages, verspielte Experimente. Open in v0 kopiert ein Projekt ins eigene Konto, wo du den Code prüfen und umbiegen kannst. Schneller als bei null anzufangen, wenn schon etwas Passendes existiert.
Die Community-Galerie: Open in v0 kopiert das Projekt zu dir.Bei 3:00 ansehen - 4
Die App generieren
Der Demo-Prompt: „eine Markdown-basierte Notiz-App mit Ordnern, Tags, Suche und Syntax-Highlighting.“ Enter, und v0 plant, dann streamt der Code in die Code-Ansicht, wo man die Dateien live entstehen sieht. Eine Minute später sitzt die fertige App in der Vorschau.
Zu sehen, wie v0 app/page.tsx beim Generieren streamt.Bei 4:00 ansehen - 5
In der Vorschau testen
Die App erst wie ein echter Nutzer benutzen: Titel und Text einer Notiz ändern, in Ordnern anlegen, löschen, die Liste durchsuchen. Verhaltenslücken jetzt gefunden heißt ein präziser Folgeprompt statt fünf vager später.
Einen Notiztitel in der Vorschau bearbeiten.Bei 4:30 ansehen - 6
Ein Element mit dem Selektor umstylen
Der Delete-Button geht in der Toolbar unter — aufs Selektor-Icon klicken, das Element wählen und nur darüber prompten: „gib diesem Delete-Button einen roten Hintergrund.“ v0 begrenzt die Änderung auf genau diese Komponente statt die Seite neu zu generieren — alles andere bleibt stabil.
Der Element-Selektor begrenzt den Prompt auf eine Komponente.Bei 9:00 ansehen - 7
Mit Versionen zurückrollen
Jede Generation behält ihre Version. Das Versions-Dropdown öffnen zum Vergleichen, und Restore holt ältere Stände zurück, wenn eine Iteration kippt — das Sicherheitsnetz, das aggressives Prompten billig macht.
Version-2-Restore-Karte — ältere Stände sind einen Klick entfernt.Bei 5:25 ansehen - 8
Auf Vercel deployen
Der Deploy-Button schiebt die App direkt auf Vercel: ein Build-Log läuft, Custom Domains werden zugewiesen, und eine Minute später hat die App eine öffentliche URL. Künftige Änderungen deployen über dasselbe Menü mit einem Klick neu.
Vom Preview zum Live-URL in einem Klick.Bei 6:00 ansehen - 9
Mit GitHub synchronisieren
Auf das GitHub-Icon klicken, v0 autorisieren, den Repository-Namen festlegen, erstellen. Von da an wird jede Prompt-Änderung in deinen Repo-Branch gepusht — der Code lässt sich auch als Zip herunterladen oder per npx einbinden. Nichts bleibt in v0 eingeschlossen.
Das GitHub-Repository anlegen, in das v0 pusht.Bei 7:00 ansehen - 10
Supabase verbinden
Daten im Browser sterben mit dem Browser. Settings → Integrations → Supabase öffnen, akzeptieren, Region und Gratis-Plan wählen, Datenbank anlegen. v0 verknüpft sie automatisch mit dem Vercel-Projekt — kein Dashboardspringen.
Der Supabase-Create-Database-Dialog in v0.Bei 8:30 ansehen - 11
E-Mail-Login ergänzen
Prompt: „Erstelle ein Authentifizierungssystem mit E-Mail und Passwort und speichere alle Daten in Supabase.“ v0 generiert die Anmelde-/Registrierungsseiten plus ein SQL-Skript für Tabellen und Sicherheitsrichtlinien. Bislang lebt die App noch im localStorage — dieser Schritt bringt sie in eine echte Datenbank.
v0 plant das Auth-System und bereitet sein SQL-Skript vor.Bei 9:10 ansehen - 12
SQL-Skript ausführen — zuerst die JWT-Zeile löschen
Eine Stolperfalle aus dem Video: Enthält das Skript eine Zeile, die app.jwt_secret setzt, diese vor dem Ausführen löschen — der Secret steht seit dem Supabase-Setup bereits fest, die Zeile wirft einen Fehler. Dann das Skript per Apply ausführen und folders, notes und Policies anlegen lassen.
Das Tabellen-Skript ohne die JWT-Zeile, bereit zum Ausführen.Bei 9:30 ansehen - 13
Die Daten live prüfen
In der Vorschau registrieren, Notizen in Ordnern anlegen und in einem anderen Browser neu öffnen — alles bleibt. Die Daten liegen nutzerspezifisch in Supabase-Tabellen, und die App ist ein echtes Full-Stack-Produkt: Frontend aus Prompts, Datenbank aus der Integration, deployed auf Vercel.
Angemeldet, Notizen beständig in Supabase.Bei 10:10 ansehen