v0 by VercelTutorielHands-On

v0 by Vercel : créer une interface React avec l’IA

12 juin 2026 12 min v0 by Vercel

v0 by Vercel transforme une consigne textuelle ou visuelle en interface, composant ou application web, avec une expérience optimisée pour Next.js. Il peut aussi générer des endpoints et connecter des services comme Supabase, Neon ou Upstash.

Ce tutoriel montre comment cadrer la génération, intégrer le code dans un projet Next.js, vérifier le build et séparer correctement preview et production.

À retenir : v0 génère une base de code à relire, construire, tester et sécuriser avant production.

Qu’est-ce que v0 et pour qui ?

v0 couvre deux niveaux de travail : le composant isolé et l’application full-stack. Cet outil de Vercel génère du code à partir d’un prompt, d’une image ou d’un projet existant, avec une préférence pour l’écosystème Next.js, React, TypeScript, Tailwind CSS et shadcn/ui.

Selon la documentation officielle des applications full-stack, v0 peut créer des routes, des endpoints et des connexions à des bases de données. Il reste donc utile aussi bien pour prototyper une interface que pour amorcer une application complète.

À qui s’adresse v0 ?

Développeurs front-end : produire et adapter des composants ou des pages.
Développeurs full-stack : amorcer l’interface, les routes et les intégrations de données.
Designers et équipes produit : transformer une intention visuelle en prototype interactif.
Développeurs utilisant un autre framework : demander une sortie adaptée, puis contrôler sa compatibilité.

v0, Lovable ou Bolt : que choisir ?

Outil	Stack et portée	Intégrations	Contrôle Git	Expérience d’édition
v0	Composants et applications full-stack, avec Next.js privilégié	Vercel, Supabase, Neon, Upstash et services compatibles	Import, export et connexion à GitHub selon le projet	Conversation, aperçu visuel et édition du code
Lovable	Applications web avec interface et logique full-stack	Données, authentification, fonctions serveur et déploiement	Synchronisation avec GitHub	Construction conversationnelle centrée sur l’application
Bolt	Applications exécutées et modifiées dans un environnement navigateur	Base de données, authentification, fonctions serveur et hébergement	Connexion à GitHub	Prompt, éditeur de code et terminal intégrés

En première approximation, d’après les capacités documentées, Choisis v0 pour créer des composants React/Next.js ou travailler à partir d’un dépôt GitHub existant ; Lovable pour une application web full-stack avec backend et déploiement gérés ; Bolt pour une application JavaScript web ou mobile construite dans le navigateur avec base de données et hébergement intégrés. Pour une stack hors Next.js, évalue l’outil sur une fonctionnalité représentative. Avant de décider, compare les trois outils sur la même fonctionnalité représentative.

Comment v0 génère une interface ou une application

v0 génère une interface à partir d’un prompt ou d’une référence visuelle. Il peut aussi analyser des fichiers et travailler sur un projet ZIP ou un dépôt GitHub existant. Il produit ensuite une proposition modifiable dans une conversation, avec aperçu et accès au code.

Prompt textuel : décrire la structure, les données, les états, le style et le comportement attendu.
Référence visuelle : fournir une capture, une maquette exportée ou un croquis pour guider la composition.

Une sortie peut inclure des composants, des pages, des routes serveur et des connexions à des services externes. La génération ne prouve toutefois ni l’accessibilité, ni la sécurité, ni l’adéquation au besoin. Vercel précise que les sorties de ses produits IA peuvent être incomplètes, erronées ou inadaptées. L’utilisateur doit en évaluer l’exactitude et l’adéquation à son usage, avec une revue humaine lorsqu’elle est légalement requise ou appropriée.

Tutoriel v0 : créer et déployer une page Next.js

La publication suit trois contrôles distincts : build local, preview Vercel, puis production. La durée varie selon la complexité du projet, les dépendances et les corrections nécessaires.

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

Vérifier les prérequis

Prévois un compte sur v0.app, la CLI Vercel, un terminal et Node.js 20.9 minimum, conformément aux prérequis officiels de Next.js.
Créer le projet Next.js
```
npx create-next-app@latest ma-landing --typescript --tailwind --app --eslint --no-src-dir --import-alias "@/*" --use-npm --yes
cd ma-landing
npm list next
npx shadcn@latest init
npx shadcn@latest add button card input badge
```
Si le projet utilise src/ ou un alias personnalisé, adapte les chemins et imports montrés avant le build.

@latest installe la version courante disponible ; vérifie la version réellement installée avec npm list next au lieu de supposer un numéro de version.

Décrire la page dans v0

Ouvre un nouveau chat sur v0.app et donne une consigne structurée :

Crée une landing page Next.js pour un outil de gestion de projets.

Structure :
- hero avec titre, sous-titre et deux appels à l'action
- grille de fonctionnalités
- présentation des offres
- FAQ et footer

Contraintes :
- TypeScript, Tailwind CSS et shadcn/ui
- une colonne sur mobile, grille sur desktop
- états focus visibles et HTML sémantique
- composants réutilisables
- aucun prix ni témoignage inventé

Examine l'aperçu, puis demande des modifications ciblées sur la hiérarchie, les composants ou les états.

Exporter et intégrer le code
Trois parcours sont possibles : copier un ou plusieurs composants dans un projet existant, utiliser l'export complet de v0 comme projet de départ, ou importer dans v0 un dépôt GitHub existant. Ce tutoriel suit le premier parcours. Dans v0, ouvre l'onglet Code puis File Explorer. Repère les fichiers et exports réellement générés. Ouvre chaque fichier nécessaire, utilise Copy File, puis recrée localement exactement le même nom et le même chemin que dans File Explorer.

Récupère aussi les styles globaux, assets, polices et dépendances utilisés ; adapte ensuite les imports de app/page.tsx aux noms réels. Si tu renommes ou déplaces un fichier, mets à jour tous ses imports, puis vérifie le build. Les cinq fichiers du snippet suivant sont uniquement des exemples d'organisation. Le snippet suivant est un exemple à adapter aux noms et chemins réels de tes composants.
```
import { Hero } from "@/components/hero"
import { Features } from "@/components/features"
import { Pricing } from "@/components/pricing"
import { Faq } from "@/components/faq"
import { Footer } from "@/components/footer"

export default function HomePage() {
  return (
    
      
      
      
      
      
    
  )
}
```
```
npm install --global vercel
vercel login
vercel link
vercel env pull .env.local
```
vercel env pull .env.local récupère par défaut les variables Development destinées au travail local. vercel deploy utilise les variables Preview configurées sur Vercel et vercel deploy --prod utilise les variables Production. Vérifie séparément les trois portées dans les paramètres du projet.
Construire le projet localement
```
npm run build
```
Corrige les erreurs TypeScript, les dépendances absentes et les problèmes de rendu avant tout déploiement.
Déployer une preview
```
vercel deploy
```
Cette commande crée normalement une preview. Vérifie son URL, la navigation, le responsive, les formulaires, les variables d'environnement et les erreurs affichées dans les journaux.
Passer en production
```
vercel deploy --prod
```
Utilise cette commande uniquement après validation de la preview, conformément à la procédure officielle de déploiement avec la CLI Vercel.

Comment mieux prompter et itérer dans v0

Un prompt exploitable fixe quatre éléments : structure, contenu, comportement et contraintes techniques. Commence par l’architecture, puis affine une variable à la fois afin d’identifier l’effet de chaque demande.

Procéder par itérations ciblées

« Crée une fiche produit avec image, titre et bouton principal. »
« Ajoute un état de chargement et désactive le bouton pendant l’envoi. »
« Affiche les erreurs sous le champ concerné. »
« Vérifie la navigation au clavier et les libellés accessibles. »

Donner des contraintes vérifiables

Layout : nombre de colonnes, ordre mobile et largeur maximale.
États : chargement, erreur, succès, données absentes et désactivation.
Design system : tokens, composants autorisés, rayons et typographie.
Accessibilité : focus visible, labels, contraste et navigation clavier.

Éviter les demandes ambiguës

« Fais plus moderne » laisse trop de décisions ouvertes. Indique plutôt le changement attendu. Pour une fonctionnalité full-stack, précise les données, les règles d’accès, le service visé et le comportement en cas d’erreur : connecter Supabase ou créer un endpoint n’est pas hors du périmètre documenté de v0.

Exporter v0 dans un projet existant

L’export exige trois contrôles : compatibilité de la stack, dépendances et respect du design system. Une intégration par copier-coller peut fonctionner avec React, Tailwind et shadcn/ui, mais elle doit toujours être relue dans le contexte du dépôt.

Avec une autre bibliothèque de composants

Demande à v0 d’utiliser les composants déjà présents ou de produire une structure sans dépendance UI supplémentaire. Compare ensuite les tokens, les variantes et les styles globaux afin d’éviter deux systèmes concurrents.

Avec Vue, Svelte ou un autre framework

v0 privilégie Next.js, mais il n’est pas strictement limité à React. Indique explicitement le framework, sa version et les conventions du projet, puis vérifie la syntaxe, les dépendances et le rendu : la qualité peut varier selon la stack demandée.

Avec un dépôt existant

Fournis les composants, types et conventions utiles plutôt qu’un prompt isolé. Contrôle le diff avant fusion et refuse toute modification non nécessaire des fichiers de configuration, de l’authentification ou des variables d’environnement.

Quelles sont les limites de v0 ?

Quatre contrôles restent indispensables : exactitude, sécurité, accessibilité et cohérence. La capacité à générer une application full-stack ne constitue pas une garantie sur sa qualité finale.

Code incomplet ou inadapté

Une sortie peut contenir des bugs, des dépendances inutiles ou une logique qui ne correspond pas au besoin. Relis le diff, construis le projet et teste les parcours critiques.

Backend et sécurité à valider

v0 peut créer des endpoints et connecter Supabase, Neon ou Upstash. Il faut néanmoins vérifier les autorisations, la validation serveur, la gestion des secrets, les erreurs et les règles d’accès aux données.

Accessibilité et internationalisation

La présence d’HTML sémantique ou d’attributs ARIA ne remplace pas les tests au clavier et avec les technologies d’assistance. Les textes doivent aussi être extraits vers le système d’internationalisation du projet.

Cohérence du produit

Des générations successives peuvent diverger sur les espacements, les composants ou les interactions. Fournis les mêmes tokens et composants de référence, puis contrôle l’ensemble dans les vues mobile et desktop.

v0 et Claude Code : répartir le workflow

Un workflow prudent répartit le projet en cinq passes : cadrage, génération, intégration, validation et déploiement. v0 peut intervenir sur l’interface comme sur le full-stack ; l’autre outil sert surtout à travailler dans le contexte complet du dépôt et à contrôler les changements.

Cadrer les données, les parcours, la stack et les critères d’acceptation.
Générer dans v0 les composants, pages ou premières intégrations nécessaires.
Intégrer dans le dépôt en conservant ses conventions et son design system.
Relire et tester le front, les endpoints, les accès aux données, l’accessibilité et la sécurité.
Construire et déployer d’abord une preview, puis la production après validation.

Essayer v0 by Vercel

FAQ sur v0 by Vercel

v0 est-il gratuit ?

Oui, v0 propose un plan Free. Consulte v0.app/pricing pour les informations en vigueur.

Peut-on utiliser le code v0 sans héberger sur Vercel ?

Oui, le code exporté peut être hébergé ailleurs si sa stack et ses dépendances sont prises en charge. Vérifie toutefois les services Vercel, intégrations et variables d'environnement utilisés avant de changer d'hébergeur.

v0 peut-il utiliser un autre framework que Next.js ?

Vercel documente l'utilisation d'autres frameworks, avec Next.js comme choix le plus fiable. Pour Vue et Svelte, valide la stack sur une fonctionnalité représentative sans supposer une prise en charge garantie.

Le code v0 est-il prêt pour la production ?

Non par défaut. La sortie doit être relue, construite, testée et sécurisée, notamment pour les accès aux données, l'authentification, l'accessibilité, les performances et les erreurs.

Peut-on utiliser une maquette Figma dans v0 ?

Oui, un lien vers le frame Figma peut être joint directement dans v0 afin de transmettre son contexte visuel et structurel. Une capture haute définition reste une solution de repli ou permet de cibler une zone précise ; il faut ensuite comparer le rendu au design source et corriger les écarts.

Comment utiliser un design system personnalisé ?

Fournis les tokens, composants et règles de composition du système. Demande à v0 de réutiliser ces éléments, puis vérifie qu'il n'introduit pas de styles ou de dépendances concurrents.

v0 peut-il générer une application complète ?

Oui. v0 peut aller du composant à l'application full-stack, créer des endpoints et connecter notamment Supabase, Neon ou Upstash. Cette capacité ne dispense pas d'une revue humaine ni des tests avant publication.

Pour aller plus loin

Trois guides complètent ce tutoriel selon l’étape du projet : création full-stack, intégration du code et choix du workflow IA.

Créer une application avec Lovable pour comparer une autre expérience de construction full-stack.
Guide complet de Claude Code pour travailler sur le dépôt, les tests et les intégrations.
Comprendre le vibe coding pour replacer ces outils dans un processus de développement maîtrisé.