Je hebt een idee voor een pagina, maar geen zin om een uur aan opmaak te besteden. v0 van Vercel neemt dat werk over: je beschrijft wat je wilt, en het levert werkende React-code met een live voorbeeld. In vijf stappen kom je van een lege chat naar een gepubliceerde pagina.
Stap 1: maak een account en open een chat
Ga naar v0.app en log in. Het gratis plan volstaat om te beginnen: dat geeft 5 dollar aan maandelijkse credits en een limiet van 7 berichten per dag (Bron: v0 Pricing). Die daglimiet bepaalt hoe je werkt. Zeven berichten zijn snel op als je per wijziging één zinnetje typt, dus schrijf je eerste prompt zorgvuldig.
Stap 2: schrijf een concrete prompt
v0 bouwt met Next.js, React, TypeScript, Tailwind CSS en shadcn/ui (Bron: v0 Docs). Vraag daarom niet om “een mooie site”, maar beschrijf onderdelen, inhoud en stijl:
Maak een landingspagina voor een fietsenmaker in Utrecht.
Bovenaan een titel en een knop "Plan een afspraak".
Daaronder drie kaarten met diensten en prijzen,
onderaan een contactformulier met naam, e-mail en bericht.
Rustige kleuren, veel witruimte.Beginner-tip: Noem echte teksten en getallen in je prompt. Zonder die details verzint v0 vulling, en die moet je daarna toch vervangen. Werk je liever met een editor dan met een chat, dan is onze gids over coderen met AI in Cursor of Copilot een logischer beginpunt.
Stap 3: verfijn in dezelfde chat
Je hoeft niet opnieuw te beginnen als iets niet klopt. Vraag in dezelfde chat om aanpassingen: “maak de kaarten breder”, “zet het formulier boven de diensten”. Elke opdracht telt mee voor je limiet, dus bundel wijzigingen in één bericht in plaats van ze los te sturen.
Stap 4: publiceer of exporteer
Klik rechtsboven in de chat op Publish en kies Publish to Production. De app komt op Vercel te staan zonder dat je verder iets configureert (Bron: v0 Docs). Wil je de code zelf beheren, dan exporteer je hem, of je koppelt GitHub en synchroniseert in twee richtingen — handig als je in Cursor of Claude Code verder wilt werken.
Stap 5: controleer wat je live zet
De code komt van een AI. Klik alle knoppen door, test het formulier en kijk op je telefoon. v0 bouwt het scherm; of dat formulier ook ergens aankomt, moet jij regelen.
Gevorderden: v0 kan bestaande GitHub-repo’s importeren en omgevingsvariabelen uit je Vercel-project ophalen, zodat je in een bestaand project werkt in plaats van naast een bestaand project (Bron: Vercel).
Wat het kost als je verder gaat
Loop je tegen die zeven berichten per dag aan, dan is Plus de volgende stap: 30 dollar per gebruiker per maand, verlaagd van 90 dollar, met Business op 100 dollar (Bron: v0 Pricing). Dat is een forse verlaging voor een tool die vorig jaar nog als duur gold, maar reken wel met credits: je verbruik hangt aan het aantal en de zwaarte van je opdrachten, niet aan een vast aantal pagina’s.
Voor Vue, Svelte of native apps is v0 niet gebouwd. Zware backend-logica of complexe inlog vraagt een coding-agent zoals Cursor — zie onze gids over Cursor 1.0. Voor een simpele site zonder code zit je beter bij een klassieke sitebouwer.
Vibe coding is inmiddels ook lesmateriaal: Google heeft er een gratis cursus van gemaakt, schreef hetlaatsteainieuws.nl.
Checklist: ben je klaar?
- v0-account actief en je weet op welk plan je zit
- Eerste prompt bevat onderdelen, echte teksten en een stijlrichting
- Wijzigingen gebundeld per bericht in plaats van los verstuurd
- Gepubliceerd via Publish → Publish to Production, of code geëxporteerd
- GitHub-sync aan als je lokaal wilt doorwerken
- Alle knoppen en formulieren zelf getest, ook op mobiel
- Formulier-afhandeling (waar gaat de inzending heen?) geregeld
Bronnen
- v0 Docs — FAQ — stack, publiceren en GitHub-sync
- v0 Pricing — credits, daglimiet en plannen
- Vercel — Introducing the new v0 — repo-import en omgevingsvariabelen