v0 by VercelTutorielHands-On

v0 by Vercel : générer des interfaces React avec l’IA (tutoriel FR)

12 juin 2026 10 min v0 by Vercel

Si Lovable est le Midjourney des apps complètes et Cursor le pair-programmeur IA, alors v0 by Vercel est le Figma des interfaces React. Tu décris une UI en langage naturel, v0 génère du code React + Tailwind + shadcn/ui production-ready que tu copies dans ton projet. C’est rapide, précis, et le code est propre.

Ce tutoriel couvre ce qu’est v0, comment l’utiliser efficacement, un exemple concret de zéro à prod avec Next.js, les limites, et comment l’intégrer dans ton workflow aux côtés de Claude Code et Cursor.

Qu’est-ce que v0 et pour qui ?

v0 est un outil de Vercel qui génère des composants UI React à partir de prompts en langage naturel ou d’images. Tu tapes « une card de produit avec image, titre, prix et bouton ajouter au panier », v0 te sort du code React + TypeScript + Tailwind CSS, stylé avec shadcn/ui, prêt à copier.

J’utilise v0 plusieurs fois par semaine pour prototyper des interfaces avant de les intégrer.

À qui c’est destiné

  • Devs front-end qui veulent prototyper vite sans partir de zéro
  • Designers qui codent un peu pour produire leurs propres maquettes interactives
  • Devs back-end qui ont besoin d’un UI potable sans passer 4 heures dessus
  • PM et product designers pour mettre en forme rapidement une idée avant spec

v0 vs Lovable vs Bolt : qui pour quoi

  • v0 : composants React isolés, tu intègres dans ton projet existant
  • Lovable : app complète avec backend + deploy, full stack
  • Bolt.new : SPA ou landing page rapide, front-heavy

Si tu as déjà un projet Next.js et tu veux juste générer des composants : v0. Si tu pars de zéro et tu veux une app full-stack : Lovable. Si tu veux une landing page standalone : Bolt.

Comment v0 fonctionne sous le capot

v0 utilise un modèle spécialisé (nommé simplement v0 en interne), fine-tuné sur :

  • Des millions d’exemples React + Tailwind + shadcn/ui
  • Les design systems modernes (Radix UI, Headless UI, Vercel design)
  • Les best practices accessibility (ARIA, semantic HTML)

Résultat : le code généré suit les patterns modernes, utilise les bons composants shadcn, et intègre des considérations d’accessibility que beaucoup de devs oublient.

Deux modes principaux :

  • Prompt textuel : tu décris en langage naturel
  • Image-to-code : tu uploades une image (mockup Figma, screenshot, dessin) et v0 génère le code correspondant

Tutoriel : de zéro à une page déployée avec Next.js

On va créer une landing page simple pour un produit SaaS fictif, en utilisant v0 pour générer les composants, puis Next.js pour les assembler et déployer sur Vercel.

Créer une landing page avec v0 + Next.js

  1. Prérequis

    Un compte Vercel (v0 est inclus avec Vercel Free tier, avec un quota mensuel de messages v0). Node.js 20+. Un terminal.

  2. Créer le projet Next.js

    npx create-next-app@latest ma-landing --typescript --tailwind --app
cd ma-landing
npx shadcn@latest init
npx shadcn@latest add button card input badge

    Tu as maintenant un Next.js 15 avec Tailwind et les composants shadcn de base.

  3. Générer le Hero sur v0

    Sur v0.dev, nouveau chat :

    Hero section pour un produit SaaS de gestion de projets.
- Titre principal gros : "Gère tes projets sans le chaos"
- Sous-titre : "L'outil no-bullshit pour les équipes qui veulent shipper"
- 2 boutons CTA : "Essai gratuit" et "Voir la démo"
- Illustration à droite : mockup simplifié d'un dashboard
- Fond gradient subtil
- Responsive mobile : stack vertical

    v0 génère un composant Hero en quelques secondes. Tu le preview à droite. Tu demandes des ajustements en langage naturel si besoin.

  4. Copier le code dans ton projet

    Clique sur "Code" dans v0, copie le contenu. Crée components/hero.tsx dans ton projet, colle. Importe dans app/page.tsx :

    import { Hero } from "@/components/hero"

export default function HomePage() {
  return (
    
    
      
    
    
  )
}

  5. Générer les autres sections

    Répète pour chaque section : features, pricing, testimonials, FAQ, footer. Chaque section = un nouveau chat v0, un prompt précis. Tu copies dans ton projet.

    Prompt type pour une section pricing : " Section pricing avec 3 plans (Free, Pro 29$/mois, Business 99$/mois). Badge "Recommandé" sur Pro. Bouton CTA par plan. Liste de features par plan avec icônes check/cross. "

  6. Assembler la landing page

    // app/page.tsx
import { Hero } from "@/components/hero"
import { Features } from "@/components/features"
import { Pricing } from "@/components/pricing"
import { Testimonials } from "@/components/testimonials"
import { Faq } from "@/components/faq"
import { Footer } from "@/components/footer"

export default function HomePage() {
  return (

  7. Déployer sur Vercel

    vercel deploy

    Vercel détecte Next.js, build, déploie, te donne une URL publique. 30 minutes au total, de zéro à prod.

Itérer sur le design avec v0

La vraie puissance de v0 vient de l’itération rapide. Quelques patterns qui marchent :

Itération incrémentale

Au lieu de demander tout d’un coup, commence simple et ajoute :

  1. « Une card produit simple » → v0 génère
  2. « Ajoute un badge ‘Nouveau’ en haut à droite »
  3. « Change le bouton pour un variant outline avec icône panier »
  4. « Rends la card hover-able avec un léger zoom »

Chaque itération, tu gardes ce qui marche, tu ajoutes une couche. Beaucoup plus efficace qu’un prompt initial de 500 mots.

Image en input

Tu as un mockup Figma, une capture de site qui t’inspire, un dessin sur papier : photo ou screenshot, drag-drop dans v0, laisse-le générer. Marche étonnamment bien, même sur des esquisses.

Les prompts qui marchent vraiment

  • Précis sur le layout : « grille 3 colonnes desktop, 1 colonne mobile, gap 6 »
  • Précis sur l’état : « bouton disabled pendant le loading, avec spinner »
  • Références à des design systems : « inspiration Linear, sobre, typographie système »
  • Contraintes d’accessibility : « assure-toi que le contraste AA WCAG est respecté »

Les prompts qui foirent

  • Vagues : « fais-le plus joli » → v0 change au hasard
  • Contradictoires : « moderne mais vintage » → résultat incohérent
  • Hors-scope : « gère la connexion à mon backend Supabase » → v0 fait du front, pas du backend

Exporter dans ton projet existant

v0 génère du code idiomatique React + Tailwind + shadcn/ui. Si ton projet utilise ce stack, l’intégration est triviale (copier-coller). Sinon :

Si tu utilises un autre composant library (Chakra, Material UI)

Le code v0 utilise shadcn par défaut. Options :

  • Installer shadcn en parallèle de ton autre lib (possible mais pollution CSS)
  • Demander à v0 : « utilise uniquement du JSX sans librairie de composants » — il sort du HTML/Tailwind pur que tu stylises avec ta lib
  • Utiliser Claude Code pour convertir : « convertis ce composant v0 pour utiliser Chakra à la place de shadcn »

Si tu utilises Vue, Svelte, Solid

v0 est React-only. Pour d’autres frameworks, utilise plutôt Claude Code ou Cursor Composer en précisant ton framework.

Les limites de v0 en 2026

Portée limitée au front

v0 génère de l’UI. Pas de logique métier complexe, pas de state management avancé, pas de backend. Pour un composant isolé c’est parfait. Pour une feature complète, v0 ne remplace pas un dev ou un agent full-stack.

Accessibilité basique, pas parfaite

v0 inclut souvent les attributs ARIA de base et respecte la structure sémantique. Mais les cas complexes (navigation clavier fine, screen reader testing) nécessitent encore une review humaine.

Internationalisation à la main

Le texte généré est en anglais par défaut. Pour du multi-langue, tu dois extraire les strings et les intégrer à ton système i18n manuellement.

Intégration backend toi-même

v0 te donne une form avec un onSubmit qui logue à la console. Tu dois toi-même câbler l’appel API, gérer les erreurs, la validation serveur.

Cohérence visuelle sur gros projets

Si tu génères 50 composants avec v0, ils peuvent avoir des styles légèrement incohérents (paddings, bordures). Tu dois poser un design system strict en amont et le référencer dans chaque prompt.

v0 + Claude Code : le workflow gagnant

Voici la combo que je recommande pour maximiser l’utilité de v0 :

  1. Utilise v0 pour générer les composants UI initiaux (hero, pricing, dashboard widgets, forms)
  2. Copie le code dans ton projet
  3. Passe à Claude Code pour connecter le backend : ajoute les handlers API, la validation, l’auth, la gestion d’état
  4. Itère sur le design via v0 si besoin d’ajustements visuels importants
  5. Polish final avec Claude Code : refactor, tests, perf

Chaque outil fait ce pour quoi il est le meilleur. v0 pour la vitesse de génération UI. Claude Code pour l’intégration complète.

Essayer v0 by Vercel
v0 est-il gratuit ?
Oui, avec un quota mensuel inclus dans le plan Vercel Free. Pour usage intensif, le plan Vercel Pro augmente le quota. Tarifs précis sur vercel.com/pricing.
Peut-on utiliser v0 sans Vercel ?
v0 est un produit Vercel, tu utilises leur plateforme pour générer. Mais le code que v0 génère est 100 % standard React/Next.js, tu peux le déployer n'importe où (Cloudflare, Netlify, AWS, ton propre serveur).
v0 fonctionne-t-il avec Vue, Svelte, Solid ?
Non, v0 génère uniquement du React. Pour Vue ou Svelte, utilise Claude Code, Cursor Composer ou Lovable en précisant ton framework.
Le code v0 est-il production-ready ?
Pour l'UI et le markup, oui. Pour le code complet incluant backend, validation, perf : non, il faut compléter. v0 te donne 70-80 % du travail front, tu fais les 20-30 % restants.
Peut-on importer un mockup Figma dans v0 ?
Oui, copie-colle ou drag-drop une image de ton design Figma. v0 génère le code correspondant. La précision varie selon la complexité du design, mais c'est un excellent starting point.
Comment v0 gère-t-il les design systems custom ?
v0 utilise shadcn/ui par défaut. Pour un design system custom, soit tu demandes du JSX Tailwind pur (à styliser toi-même), soit tu utilises Claude Code après v0 pour convertir vers ton DS.
v0 peut-il générer une app complète ?
Pas vraiment. v0 est centré sur des composants et des pages isolées. Pour une app full-stack avec auth, backend, DB, deploy : utilise Lovable. Voir le tuto Lovable.

Pour aller plus loin

Tu utilises v0 d’une manière originale ? Partage ton workflow : hello@tutosss.com.