Utiliser v0 de Vercel : un tutoriel débutant avec captures d'écran
Un parcours complet de v0.dev, reconstruit à partir d'un vrai projet de débutant — Enhanced Prompt, sélecteur d'élément, versions, déploiement Vercel en un clic, synchronisation GitHub et base de données Supabase avec connexion. Chaque étape est illustrée.
v0 en bref
- v0.dev est le builder IA de Vercel : décrivez l'application en langage courant (ou joignez une capture ou un fichier Figma) et il génère une application Next.js fonctionnelle, aperçu et code côte à côte.
- Enhanced Prompt quand l'idée est mince, le sélecteur d'élément pour restyler un composant précis, la liste de versions pour annuler une itération ratée.
- Le déploiement est un clic vers Vercel, et la synchronisation GitHub pousse chaque changement dans votre dépôt — votre code n'est jamais enfermé dans v0.
- Les vraies données passent par l'intégration Supabase : créez la base depuis les réglages de v0, laissez v0 exécuter son script SQL (supprimez d'abord la ligne JWT), et votre app reçoit une connexion e-mail avec des données par utilisateur.
How to use v0.dev by Vercel For Beginners
Vidéo source de:Code with Nathan12:28
Les captures d'écran proviennent de la vidéo source et sont créditées avec des liens horodatés. Le texte est notre propre rédaction, basée sur la transcription intégrale — les faits correspondent à l'enregistrement.
Ce tutoriel est un résumé illustré indépendant pour celles et ceux qui préfèrent lire. Pour soutenir le créateur, regardez la vidéo originale sur la chaîne Code with Nathan, liée ci-dessus.
Créer une application dans v0, étape par étape
- 1
Commencer sur v0.dev
Créez un compte gratuit sur v0.dev. La barre latérale regroupe vos discussions et projets ; la grande zone de prompt au centre est le point de départ. Autour, des actions rapides — cloner une capture, importer depuis Figma, pages d'atterrissage — et le bouton de pièce jointe accepte images et fichiers Figma comme entrée de design.
Le composer de v0.dev avec actions rapides et sélecteur de modèle.Voir à 2:00 - 2
Développer votre idée avec Enhanced Prompt
« Une application de prise de notes » donne peu à manger à v0. Le bouton Enhanced Prompt la réécrit avec fonctionnalités clés, authentification utilisateur et design réactif. Sautez-le si votre prompt est déjà détaillé — l'expansion peut aussi dévier l'app de votre vision. Pour l'UI du quotidien, le modèle medium est le choix économique ; gardez large pour les builds complexes.
Enhanced Prompt transforme une ligne en vraie spécification.Voir à 2:15 - 3
Parcourir les projets de la communauté
Sous le composer, la galerie communautaire montre ce que d'autres ont construit — portfolios, pages d'atterrissage, expérimentations. Open in v0 copie le projet dans votre compte, où vous pouvez inspecter le code ou le plier à vos besoins. Plus rapide que partir de zéro quand quelque chose de proche existe déjà.
La galerie communautaire : Open in v0 copie le projet chez vous.Voir à 3:00 - 4
Générer votre application
Le prompt de démo : « une application de notes en markdown avec dossiers, étiquettes, recherche et coloration syntaxique. » Entrée, et v0 planifie puis écrit le code en flux dans la vue Code, où les fichiers apparaissent en direct. Une minute plus tard, l'app finie trône dans l'aperçu.
v0 en train de diffuser app/page.tsx pendant la génération.Voir à 4:00 - 5
La tester dans l'aperçu
Utilisez l'app comme un vrai utilisateur avant de changer quoi que ce soit : modifiez le titre et le texte d'une note, créez dans des dossiers, supprimez-en une, cherchez dans la liste. Trouver les lacunes maintenant, c'est un prompt de suivi précis au lieu de cinq vagues plus tard.
Modifier un titre de note dans le volet d'aperçu.Voir à 4:30 - 6
Restyler un élément avec le sélecteur
Le bouton de suppression se fond dans la barre d'outils — cliquez sur l'icône sélecteur, choisissez l'élément, et ne parlez que de lui : « mets un fond rouge à ce bouton de suppression. » v0 limite le changement à ce composant au lieu de régénérer la page — tout le reste reste stable.
Le sélecteur d'élément restreint le prompt à un seul composant.Voir à 9:00 - 7
Revenir en arrière avec les versions
Chaque génération garde sa version. Ouvrez le menu des versions pour comparer, et Restore ramène un état antérieur quand une itération part de travers — le filet de sécurité qui rend les prompts audacieux bon marché.
La carte de restauration Version 2 — les états antérieurs restent à un clic.Voir à 5:25 - 8
Déployer sur Vercel
Le bouton Deploy pousse l'app directement sur Vercel : le journal de build défile, les domaines personnalisés sont attribués, et une minute plus tard votre app a une URL publique. Les changements suivants se redéploient en un clic depuis le même menu.
De l'aperçu à l'URL en ligne en un clic.Voir à 6:00 - 9
Synchroniser avec GitHub
Cliquez sur l'icône GitHub, autorisez v0, nommez le dépôt et créez-le. Dès lors, chaque changement poussé par prompt arrive dans une branche de votre dépôt — et vous pouvez toujours télécharger le code en zip ou le tirer via npx. Rien ne reste enfermé dans v0.
Créer le dépôt GitHub vers lequel v0 poussera.Voir à 7:00 - 10
Connecter Supabase
Les données dans le navigateur meurent avec le navigateur. Ouvrez Settings → Integrations → Supabase, acceptez, choisissez une région et l'offre gratuite, créez la base. v0 la relie automatiquement à votre projet Vercel — sans va-et-vient de console.
La boîte de dialogue Supabase Create Database dans v0.Voir à 8:30 - 11
Ajouter une connexion par e-mail
Prompt : « Crée un système d'authentification par e-mail et mot de passe et stocke toutes les données dans Supabase. » v0 génère les pages de connexion et d'inscription plus un script SQL qui crée les tables et les politiques de sécurité. Pour l'instant, les données vivent dans le localStorage — cette étape les déplace vers une vraie base.
v0 planifie le système d'authentification et prépare son script SQL.Voir à 9:10 - 12
Exécuter le script SQL — supprimez d'abord la ligne JWT
Un piège que la vidéo souligne : si le script contient une ligne définissant app.jwt_secret, supprimez-la avant de l'exécuter — elle provoque une erreur, le secret ayant déjà été configuré à la création de Supabase. Exécutez ensuite le script (Apply dans v0) pour créer les tables folders, notes et leurs politiques.
Le script de création de tables, sans la ligne JWT, prêt à s'exécuter.Voir à 9:30 - 13
Vérifier vos données en ligne
Inscrivez-vous dans l'aperçu, créez des notes dans des dossiers, rouvrez depuis un autre navigateur — tout persiste. Vos données vivent dans des tables Supabase, cloisonnées par utilisateur, et l'app est un vrai produit full-stack : front généré par prompts, base via une intégration, déployé sur Vercel.
Connecté, avec des notes qui persistent dans Supabase.Voir à 10:10