Bolt.new pas-à-pas 2026 : prototyper une application en 15 minutes

📍 Article principal de la série : Vibe coding 2026 : du tweet de Karpathy aux outils dominants
Cet article fait partie de la série « vibe coding ». Pour la vue d’ensemble du concept, des plateformes concurrentes et de la méthodologie disciplinée, lire d’abord le guide principal.

Pourquoi Bolt.new pour prototyper

Imaginez que vous êtes à un événement entrepreneur à Abidjan, vous croisez un investisseur potentiel et vous mentionnez votre idée de plateforme. La conversation s’étire, l’intérêt est réel mais flou, et l’investisseur vous lance : « Envoyez-moi une démo lundi ». Vendredi soir. Vous avez le week-end pour produire quelque chose qui montre votre vision sans coûter une fortune. Bolt.new, lancé fin 2024 par StackBlitz sous la direction d’Eric Simons, est conçu précisément pour ce moment : passer d’une idée à une démonstration interactive en moins d’une heure, dans le navigateur, sans installer quoi que ce soit, avec une flexibilité de framework supérieure aux concurrents.

Là où Lovable cible les non-développeurs et impose un stack par défaut (React + Supabase), Bolt.new s’adresse à un profil un peu plus technique et offre la liberté de framework : Next.js, Astro, Vue, Svelte, Remix, et même des projets backend Python ou Node. Toute la magie tient dans une technologie maison de StackBlitz, les WebContainers, qui exécutent Node.js directement dans le navigateur via WebAssembly, sans serveur distant pour l’environnement de développement. Concrètement, votre projet tourne en local dans votre onglet Chrome — c’est rapide, c’est isolé, et ça permet à Bolt.new d’itérer extrêmement vite sur le code.

Ce tutoriel suit la production d’un prototype de bout en bout : compte, création du projet, choix du framework, itération conversationnelle, ajout d’une intégration externe, déploiement sur Netlify ou Vercel, partage avec un investisseur. Cible : un dossier de présentation de cinq pages avec formulaire de contact en quinze minutes effectives, démontrable lundi matin.

Prérequis

• Navigateur Chrome ou Edge récent (les WebContainers exigent un moteur Chromium ; Firefox fonctionne en mode dégradé)
• Au moins 8 Go de RAM disponible — l’environnement Node tourne dans l’onglet et consomme
• Connexion internet stable (5 Mbps minimum)
• Compte Bolt.new (inscription gratuite, plans payants à partir de 20 USD par mois soit environ 12 000 FCFA)
• Compte Netlify ou Vercel pour le déploiement public (les deux ont un quota gratuit suffisant)
• Niveau attendu : intermédiaire — connaître les notions de framework web, terminal et variables d’environnement aide. Pas besoin d’être développeur senior.
• Temps estimé : 15 à 30 minutes pour un prototype simple, 1 à 2 heures pour quelque chose de présentable

Étape 1 — Premier projet en quinze secondes

L’interface d’accueil de Bolt.new ressemble à une boîte de saisie centrale invitant à décrire un projet, comme un ChatGPT mais orienté production de code. Pour démarrer un prototype de présentation startup, tapez par exemple : « Crée une landing page Next.js pour une startup fintech ouest-africaine appelée WaveBridge. Cinq sections : hero avec une promesse forte, fonctionnalités, témoignages, tarification en FCFA, formulaire de contact. Style sobre, palette bleu marine et orange. Responsive mobile-first. »

Au moment où vous validez, Bolt.new lance trois choses en parallèle : la génération du code, le démarrage d’un environnement Node dans le navigateur via WebContainers, et l’installation des dépendances npm. Quinze à trente secondes plus tard, vous voyez l’aperçu de la page apparaître à droite de l’écran, déjà fonctionnelle, avec des données de démonstration. C’est cette rapidité — pas de temps de configuration locale, pas de npm install sur votre machine — qui distingue Bolt.new des outils classiques.

L’interface partagée présente trois zones : la conversation à gauche pour dialoguer avec l’agent, l’explorateur de fichiers et l’éditeur de code au centre, l’aperçu en direct à droite. Vous pouvez ouvrir n’importe quel fichier généré pour le lire — page d’accueil, composants, configuration de framework, fichier package.json — et voir le code que l’agent a produit. C’est précieux : contrairement au vibe coding aveugle, Bolt.new vous laisse explicitement la possibilité de comprendre ce qui se passe.

Étape 2 — Itérations rapides et choix structurants

La première version est rarement parfaite. Le cycle d’itération est extrêmement court : vous demandez une modification dans la conversation, l’agent applique, l’aperçu se rafraîchit en deux à cinq secondes. Voici un exemple de séquence efficace pour un dossier d’investisseur :

• « Remplace le hero par un titre plus précis : ‘Transferts d’argent CEDEAO en moins de 30 secondes’. Ajoute un sous-titre qui parle des frais réduits par rapport au mobile money traditionnel. »
• « Dans la section tarification, propose trois niveaux : Particulier (gratuit, 1 % de frais), Pro (15 000 FCFA/mois, 0,5 % de frais), Entreprise (sur devis). »
• « Ajoute une section de logos partenaires sous le hero : place les logos de quatre banques fictives en niveaux de gris. Utilise des placeholders nommés Banque 1, Banque 2, etc. »
• « Le formulaire de contact doit envoyer un e-mail à contact@wavebridge.example. Utilise une intégration Resend si possible. »

À chaque message, Bolt.new modifie les fichiers concernés et le résultat apparaît immédiatement. La conversation tient lieu d’historique : si vous voulez revenir à une version antérieure, demandez à l’agent d’annuler la dernière modification, ou utilisez le système de checkpoints intégré qui sauvegarde l’état du projet à intervalles réguliers.

Étape 3 — Comprendre WebContainers et les limites

Avant d’aller plus loin, il vaut la peine de comprendre ce que fait Bolt.new sous le capot. WebContainers est une implémentation de Node.js qui tourne entièrement dans le navigateur via WebAssembly. Quand vous voyez l’aperçu fonctionner, c’est littéralement Node qui s’exécute dans votre onglet Chrome, avec un système de fichiers virtuel. Tout votre projet vit dans la mémoire du navigateur jusqu’au moment où vous le déployez ou le synchronisez avec GitHub.

Cette architecture explique trois caractéristiques importantes. Premièrement, le démarrage est très rapide : pas de spin-up de conteneur distant, tout se fait localement. Deuxièmement, certaines fonctionnalités du Node natif ne sont pas disponibles ou se comportent différemment — les bibliothèques qui font des appels système bas niveau peuvent ne pas fonctionner. Troisièmement, si vous fermez l’onglet sans avoir sauvegardé, vous perdez votre travail. Bolt.new propose une synchronisation avec GitHub qu’il faut activer dès qu’un projet a une valeur réelle.

Demandez explicitement à l’agent : « Connecte ce projet à un nouveau dépôt GitHub. Pousse le code initial. » L’agent guide à travers le flux d’autorisation OAuth GitHub, crée le dépôt, fait le premier commit. À partir de là, chaque modification que vous validez peut être commitée et poussée régulièrement, ce qui garantit la persistance et permet à un développeur de reprendre le projet dans son IDE habituel — Cursor, VS Code — sans perdre une ligne de code.

Étape 4 — Intégrer une API externe

Une vraie démonstration intègre généralement une fonctionnalité externe. Pour le formulaire de contact de WaveBridge, l’option la plus simple est Resend, un service d’envoi d’e-mails par API qui propose un plan gratuit suffisant pour les démonstrations. Créez un compte sur resend.com, générez une clef d’API dans le tableau de bord, et revenez sur Bolt.new.

Demandez à l’agent : « Intègre Resend pour l’envoi des e-mails du formulaire de contact. Crée une route API Next.js qui reçoit le formulaire, valide les champs (nom, e-mail, message obligatoires) et envoie l’e-mail via Resend. Ne mets pas la clef d’API en dur, utilise une variable d’environnement RESEND_API_KEY. »

L’agent crée la route, ajoute la dépendance Resend au package.json, configure le code pour lire la variable d’environnement. Vient alors la question de fournir la clef. Bolt.new propose une interface dédiée pour les variables d’environnement, généralement dans les paramètres du projet. Ne collez jamais de clef secrète directement dans la conversation, qui peut être consultée par d’autres si vous partagez le projet plus tard. Ajoutez-la via l’interface, redémarrez l’aperçu si nécessaire, et testez le formulaire — l’e-mail doit arriver dans votre boîte de réception en quelques secondes.

Étape 5 — Déploiement public en un clic

Pour partager une URL avec un investisseur ou un partenaire, le projet doit être déployé. Bolt.new propose une intégration native avec Netlify et Vercel, les deux principaux hébergeurs de sites front-end. Cliquez sur « Deploy » dans l’interface, choisissez Netlify ou Vercel, autorisez l’intégration OAuth la première fois.

Pour un projet Next.js classique, Vercel est le choix naturel — Next.js est créé et maintenu par Vercel, l’intégration est sans friction. Pour des sites statiques ou des projets avec des particularités (Astro, Eleventy, formulaires Netlify Forms), Netlify peut être plus adapté. Quel que soit votre choix, le déploiement initial prend deux à cinq minutes : Bolt.new pousse le code, l’hébergeur installe les dépendances, build le projet, et fournit une URL au format nom-du-projet.vercel.app ou nom-du-projet.netlify.app.

Reportez les variables d’environnement (la clef Resend) dans le dashboard de l’hébergeur — Vercel et Netlify proposent tous deux une interface dédiée pour ça — et redéployez. Une fois en ligne, l’URL fonctionne pour tout le monde sur internet, supporte HTTPS automatiquement via certificat Let’s Encrypt, et offre des performances correctes même depuis Dakar grâce aux CDN globaux des deux hébergeurs.

Étape 6 — Domaine personnalisé et finitions

L’URL automatique en .vercel.app ou .netlify.app suffit pour une démo investisseur, mais pour un usage commercial vous voudrez un domaine personnalisé. Achetez le domaine chez un registrar de votre choix, puis configurez les enregistrements DNS pointant vers votre hébergeur — Vercel ou Netlify fournissent tous deux la documentation précise des valeurs CNAME et A à utiliser. La propagation prend généralement entre quelques minutes et deux heures.

Côté finitions, demandez à l’agent : « Ajoute un fichier robots.txt qui autorise l’indexation, un sitemap.xml, et les balises Open Graph et Twitter Card sur la page d’accueil pour que les partages sur LinkedIn et X affichent un aperçu correct. » Ces détails techniques se règlent en deux ou trois échanges supplémentaires et professionnalisent radicalement la perception du projet.

Erreurs fréquentes

Adaptation au contexte ouest-africain

Trois angles méritent attention pour un usage productif depuis l’Afrique de l’Ouest. Le premier est la RAM disponible : Bolt.new exécutant Node dans l’onglet, un ordinateur d’entrée de gamme avec 4 Go de RAM peut peiner sur des projets dépassant quelques dizaines de fichiers. Pour un usage professionnel régulier, prévoyez 8 Go minimum, idéalement 16 Go.

Le deuxième est la tarification : le plan gratuit suffit pour des prototypes ponctuels ; le plan Pro à 20 USD par mois (environ 12 000 FCFA) couvre l’usage quotidien d’un freelance ou d’un développeur indépendant. Comparé à Lovable (25 USD/mois) ou Replit Core (25 USD/mois), Bolt.new offre la flexibilité de framework la plus large pour un tarif légèrement inférieur — ce qui en fait un choix particulièrement intéressant pour les profils techniques qui veulent rester libres dans leurs choix.

Le troisième est la connectivité : Bolt.new est lourd côté navigateur mais léger côté réseau une fois la session démarrée. Une connexion 4G stable suffit, à condition d’éviter les coupures fréquentes qui peuvent perdre la session WebContainer. Pour les zones où la fibre est disponible (centre-ville Dakar, Cocody Abidjan, certains quartiers d’Accra), l’expérience devient excellente. Pour les zones moins bien desservies, prévoyez de travailler en sessions courtes et de pousser régulièrement vers GitHub pour ne rien perdre.

Tutoriels associés

• Lovable tutoriel pratique : créer une app SaaS sans coder en 2026
• v0 by Vercel : générer composants React production-ready

Pour aller plus loin

• 🔝 Retour au guide principal : Vibe coding 2026 : guide complet
• Documentation officielle Bolt.new : support.bolt.new
• WebContainers (StackBlitz) : webcontainers.io
• Documentation Vercel : vercel.com/docs
• Documentation Netlify : docs.netlify.com
• Pour aller vers un développement professionnel après le prototype : guide principal AI coding développeur 2026

FAQ

Quelle différence entre Bolt.new et Lovable ?
Lovable est plus accessible aux non-développeurs et impose React + Supabase comme stack par défaut. Bolt.new offre la flexibilité de framework la plus large (Next.js, Astro, Vue, Svelte, Remix) et exécute le code dans le navigateur via WebContainers — meilleur compromis pour un profil un peu technique qui veut prototyper rapidement avec son framework de prédilection.

Bolt.new fonctionne-t-il hors ligne ?
Non. Bien que l’environnement Node tourne localement dans le navigateur, l’interaction avec l’agent IA nécessite une connexion à l’API distante. Une connexion stable est indispensable.

Combien de projets peut-on avoir simultanément ?
Le plan gratuit limite le nombre de projets actifs simultanément. Les plans payants relèvent ces limites. Pour un usage régulier multi-clients, le plan Pro est l’investissement raisonnable.

Peut-on utiliser Bolt.new pour développer un projet à long terme ?
La pratique recommandée consiste à utiliser Bolt.new pour le démarrage et la phase exploratoire, puis à basculer sur un IDE classique (Cursor, VS Code) une fois le projet stabilisé. Le code reste compatible — c’est du Next.js, Vue ou autre standard — donc la migration est triviale.

Comment éviter de payer Vercel ou Netlify ?
Le quota gratuit de Vercel et Netlify suffit largement pour une démonstration et même pour des sites à faible trafic. Vous ne payez que si votre site dépasse un certain volume — auquel cas vous aurez probablement de toute façon un revenu pour couvrir les frais.

Bolt.new conserve-t-il mes idées et mon code privés ?
Vérifiez les conditions d’utilisation à jour de StackBlitz pour les détails sur la politique de confidentialité du code soumis. Pour des projets sensibles, la pratique prudente consiste à pousser le code régulièrement vers un dépôt GitHub privé que vous contrôlez et à éviter de partager des secrets dans la conversation.