Netlify et Vibe Coding : le guide pratique | IQ Project

Vous venez de créer une application avec Bolt, Claude Code ou Cursor, et vous cherchez le moyen le plus simple de la mettre en ligne ? Netlify est la plateforme de déploiement préférée des Vibe Coders, et pour cause : déploiement automatique depuis GitHub, previews de chaque modification, rollback en un clic, et désormais un serveur MCP qui permet à votre agent IA de tout piloter sans quitter votre éditeur.

Dans notre guide complet du déploiement pour Vibe Coders, nous avions présenté les principales plateformes d'hébergement. Cet article va plus loin : il détaille concrètement comment utiliser Netlify avec chaque outil de Vibe Coding, du premier déploiement jusqu'à l'automatisation complète via le MCP.

Pourquoi Netlify est la plateforme de référence en Vibe Coding

En mars 2025, Netlify et Bolt ont franchi ensemble le cap du million de sites générés par IA déployés sur la plateforme, en seulement cinq mois. Ce chiffre illustre à quel point Netlify s'est imposé comme l'infrastructure par défaut de l'écosystème Vibe Coding.

Plusieurs raisons expliquent cette adoption massive :

Déploiement automatique depuis Git : chaque push sur votre branche principale déclenche un build et un déploiement en production
Deploy Previews : chaque pull request génère une URL de prévisualisation unique pour tester avant de mettre en production
Plan gratuit généreux : 300 crédits mensuels incluant bandwidth, builds et fonctions serverless
CDN mondial : votre application est servie depuis le point de présence le plus proche de chaque visiteur
MCP Server officiel : les agents IA peuvent déployer et gérer vos sites directement depuis Cursor ou Claude Code

La philosophie de Netlify correspond parfaitement à celle du Vibe Coding : éliminer la friction entre la création et la mise en production. Pas de serveur à configurer, pas de pipeline CI/CD à écrire manuellement, pas d'infrastructure à maintenir.

Déployer une app Bolt sur Netlify : le workflow pas à pas

Bolt est l'un des AI builders les plus populaires pour créer des applications web complètes en quelques minutes. Son intégration native avec Netlify rend le déploiement presque instantané.

Méthode 1 : Publication directe depuis Bolt

C'est la méthode la plus rapide pour les débutants :

Connectez votre compte Netlify : dans les paramètres de votre projet Bolt, accédez à la section Applications et cliquez sur « Connect » dans la section Netlify
Sélectionnez Netlify comme hébergeur : dans les paramètres du projet, choisissez Netlify dans le menu déroulant du fournisseur d'hébergement
Publiez : cliquez sur le bouton Publish en haut à droite, confirmez, et attendez environ une minute
Récupérez votre URL : Netlify génère automatiquement une URL en .netlify.app que vous pouvez personnaliser

Important : si votre projet a déjà été publié avec l'hébergement Bolt natif, vous ne pourrez pas le basculer vers Netlify. Il faudra créer un nouveau projet.

Méthode 2 : Export vers GitHub puis déploiement Netlify

Cette méthode offre plus de contrôle et active le déploiement continu :

Exportez votre code vers GitHub : depuis StackBlitz (l'environnement sous-jacent de Bolt), créez un nouveau dépôt GitHub pour votre projet
Connectez le dépôt à Netlify : sur app.netlify.com, cliquez sur « Add new site » → « Import from Git » → sélectionnez votre dépôt
Configurez le build : Netlify détecte automatiquement le framework (React, Vite, etc.) et pré-remplit les commandes de build
Déployez : chaque push futur sur la branche main déclenchera automatiquement un nouveau déploiement

Cette approche est recommandée pour les projets sérieux, car elle vous donne un historique Git complet, des deploy previews sur chaque pull request, et la possibilité de collaborer avec d'autres développeurs. Pour optimiser vos crédits, c'est aussi plus efficace : vous ne consommez des crédits Bolt que pour la génération de code, pas pour l'hébergement.

Méthode 3 : Déploiement manuel (drag and drop)

Pour les cas où vous voulez déployer rapidement sans connecter GitHub :

Exécutez npm run build localement (ou téléchargez le dossier de build depuis Bolt)
Sur Netlify, glissez-déposez le dossier dist ou build directement dans l'interface
Votre site est en ligne en quelques secondes

Simple, mais sans déploiement continu. Cette méthode convient pour des prototypes rapides ou des démonstrations ponctuelles.

Déployer depuis Cursor ou Claude Code avec la CLI Netlify

Si vous utilisez Claude Code ou Cursor pour développer vos projets, la CLI Netlify est votre meilleure alliée. Elle permet de déployer directement depuis le terminal, sans quitter votre environnement de développement.

Installation et configuration initiale

La mise en place prend moins de deux minutes :

# Installer la CLI Netlify globalement
npm install -g netlify-cli

# S'authentifier (ouvre le navigateur pour se connecter)
netlify login

# Dans votre projet, lier à un site Netlify existant ou en créer un
netlify init

La commande netlify init vous propose soit de connecter un dépôt Git existant (déploiement continu), soit de créer un site pour des déploiements manuels via CLI.

Le workflow de déploiement quotidien

Une fois configuré, votre workflow se résume à trois commandes :

# 1. Builder le projet
npm run build

# 2. Tester en mode brouillon (deploy preview)
netlify deploy

# 3. Envoyer en production quand tout est OK
netlify deploy --prod

Le déploiement brouillon (netlify deploy sans --prod) génère une URL de prévisualisation temporaire. Vous pouvez la partager avec un collègue ou un client pour validation avant de passer en production.

Workflow Git avec déploiement automatique

Pour un projet en production sérieuse, le workflow recommandé combine Git et Netlify :

# Développer sur une branche
git checkout -b feature/nouvelle-fonctionnalite

# Coder avec Claude Code ou Cursor...
# Puis commit et push
git add .
git commit -m "Ajouter la nouvelle fonctionnalité"
git push origin feature/nouvelle-fonctionnalite

Netlify crée automatiquement un deploy preview pour cette branche. Une fois validé, mergez dans main et Netlify déploie en production. Zéro intervention manuelle.

Astuce Cursor et Claude Code

Dans Cursor, vous pouvez demander directement à l'IA : « Build le projet et déploie-le sur Netlify ». L'agent exécutera les commandes dans le terminal intégré. Avec Claude Code, c'est encore plus direct puisqu'il fonctionne nativement dans le terminal :

# Claude Code peut exécuter directement
npm run build && netlify deploy --prod

Mais il existe une méthode encore plus puissante : le MCP Netlify.

Netlify MCP : piloter Netlify depuis votre agent IA

Le MCP (Model Context Protocol) est un standard ouvert créé par Anthropic qui permet aux agents IA de communiquer avec des services externes. Netlify propose un serveur MCP officiel qui transforme votre agent IA en véritable administrateur Netlify.

Ce que le MCP Netlify permet de faire

Avec le MCP configuré, votre agent IA (dans Cursor, Claude Code, VS Code ou Windsurf) peut directement :

Créer un nouveau site Netlify et le configurer sans toucher au dashboard
Déployer votre application en production d'un simple prompt
Gérer les variables d'environnement : ajouter, modifier ou supprimer des clés API et secrets
Installer des extensions Netlify (analytics, formulaires, fonctions)
Consulter les logs de déploiement pour débugger directement depuis l'IDE
Configurer les contrôles d'accès et la protection par mot de passe
Gérer les soumissions de formulaires de votre site

Concrètement, au lieu de basculer entre votre éditeur et le dashboard Netlify, vous restez concentré sur votre code. Un simple « déploie ce projet en production sur Netlify » suffit.

Installer le MCP Netlify dans Cursor

Cursor supporte les serveurs MCP nativement. Voici comment configurer celui de Netlify :

Ouvrez les paramètres de Cursor (Cursor Settings → MCP)
Ajoutez un nouveau serveur MCP avec cette configuration :

{
  "mcpServers": {
    "netlify": {
      "command": "npx",
      "args": ["-y", "@netlify/mcp"]
    }
  }
}

Redémarrez Cursor
Le serveur se connecte automatiquement à votre compte Netlify (via la CLI)

Prérequis : Node.js version 22 ou supérieure et un compte Netlify actif.

Installer le MCP Netlify dans Claude Code

L'installation dans Claude Code est encore plus simple grâce à une commande dédiée :

claude mcp add netlify npx -- -y @netlify/mcp

C'est tout. Claude Code détecte automatiquement le serveur et vous pouvez immédiatement lui demander de déployer, gérer les variables d'environnement ou consulter les logs de vos sites Netlify.

Exemple de workflow MCP en action

Voici un scénario concret d'utilisation du MCP Netlify avec Claude Code :

> "Crée un nouveau site Netlify pour ce projet, configure la variable 
   d'environnement SUPABASE_URL, et déploie en production."

Claude Code exécute :
1. Création du site Netlify via l'API
2. Configuration de la variable d'environnement  
3. Build du projet
4. Déploiement en production
5. Retour de l'URL live

Tout se passe dans une seule conversation, sans ouvrir de navigateur. C'est l'essence même du Vibe Coding : rester dans le flow créatif sans interruption.

Résoudre les problèmes d'authentification

Si le MCP ne parvient pas à s'authentifier automatiquement, vous pouvez utiliser un Personal Access Token (PAT) :

Accédez aux paramètres utilisateur Netlify → OAuth → Personal Access Tokens
Créez un nouveau token
Ajoutez-le à votre configuration MCP :

{
  "mcpServers": {
    "netlify": {
      "command": "npx",
      "args": ["-y", "@netlify/mcp"],
      "env": {
        "NETLIFY_PERSONAL_ACCESS_TOKEN": "votre-token-ici"
      }
    }
  }
}

Attention : ne commitez jamais votre token dans un dépôt Git. Pour en savoir plus sur la sécurité du code généré par IA, consultez notre guide dédié.

Les fonctionnalités Netlify essentielles pour Vibe Coders

Au-delà du simple hébergement, Netlify offre des fonctionnalités qui simplifient considérablement la vie des Vibe Coders. Voici celles que vous utiliserez au quotidien.

Deploy Previews : tester avant de publier

Chaque branche Git et chaque pull request génère automatiquement une URL de prévisualisation unique. C'est extrêmement utile pour :

Montrer une nouvelle fonctionnalité à un client avant de la mettre en production
Tester sur mobile et desktop avant le déploiement final
Faire relire le contenu par un collègue sur un vrai environnement
Comparer visuellement deux versions de votre application

Les deploy previews sont incluses dans le plan gratuit, sans limite de nombre.

Rollback en un clic : l'assurance anti-catastrophe

Vous avez déployé un bug en production ? Pas de panique. Depuis le dashboard Netlify, vous pouvez revenir à n'importe quel déploiement précédent en un clic. Netlify conserve l'historique complet de tous vos déploiements. Le rollback est instantané car Netlify ne reconstruit rien : il redirige simplement le trafic vers la version précédente déjà en cache sur le CDN.

Variables d'environnement : gérer vos clés API

Vos projets Vibe Coding utilisent souvent des services tiers (Supabase, Stripe, API OpenAI...). Les variables d'environnement Netlify vous permettent de stocker ces clés en toute sécurité :

Accessibles pendant le build et par les fonctions serverless
Différentes valeurs possibles par contexte (production, deploy preview, branche)
Gérables via le dashboard, la CLI (netlify env:set) ou le MCP

Redirections et rewrites

Pour les Single Page Applications (SPA) créées avec React ou Vue — ce que produisent la plupart des AI builders — vous aurez besoin de redirections. Créez un fichier _redirects à la racine de votre dossier de build :

/*    /index.html   200

Cette ligne redirige toutes les routes vers index.html, permettant au routeur côté client de gérer la navigation. Sans cette configuration, vos pages renverront une erreur 404 lors d'un accès direct ou d'un rafraîchissement.

Formulaires Netlify : capturer des leads sans backend

Netlify peut intercepter les soumissions de formulaires HTML sans aucun code backend. Ajoutez simplement l'attribut netlify à votre balise <form> :

<form name="contact" netlify>
  <input type="email" name="email" required />
  <textarea name="message"></textarea>
  <button type="submit">Envoyer</button>
</form>

Les soumissions sont consultables dans le dashboard Netlify. Idéal pour une landing page ou un prototype qui collecte des retours utilisateurs.

Edge Functions : la logique serveur au plus proche

Les Edge Functions de Netlify permettent d'exécuter du code côté serveur au plus près de l'utilisateur (sur le CDN). Cas d'usage typiques en Vibe Coding :

Personnalisation du contenu selon la géolocalisation
A/B testing côté serveur
Authentification et vérification de tokens
Transformation de données avant rendu

Prêt à maîtriser le déploiement de vos projets IA ?

Notre formation Vibe Coding vous accompagne de l'idée au produit déployé en production. En 8 soirées, vous apprenez à créer, tester et déployer sur Netlify et d'autres plateformes.

Le plan gratuit Netlify : ce qui est inclus

Bonne nouvelle pour les Vibe Coders qui débutent : le plan gratuit de Netlify est largement suffisant pour la plupart des projets. Depuis septembre 2025, Netlify utilise un système de crédits mensuels.

Ce que vous obtenez gratuitement

Ressource	Inclus (plan gratuit)	Suffisant pour
Crédits mensuels	300	~20 déploiements + trafic modéré
Deploy Previews	Illimités	Tous vos tests et validations
Domaines personnalisés + SSL	Inclus	Votre nom de domaine avec HTTPS
CDN mondial	Inclus	Performance optimale partout
Functions & Edge Functions	Incluses (dans les crédits)	Logique serveur basique
Stockage fichiers	Inclus	Assets de votre application
Déploiement depuis Git/API/IA	Inclus	Tous les workflows décrits ici

Comment les crédits sont consommés

Chaque action consomme un nombre défini de crédits :

Déploiement en production : 15 crédits par déploiement
Bandwidth : 10 crédits par Go transféré
Requêtes web : 3 crédits par tranche de 10 000 requêtes
Compute (fonctions) : 5 crédits par Go-heure
Soumission de formulaire : 1 crédit par soumission

Avec 300 crédits, un projet Vibe Coding typique (quelques déploiements par semaine, trafic modéré) tiendra confortablement le mois entier. Si vous dépassez la limite, le site est temporairement suspendu jusqu'au mois suivant — aucune facture surprise.

Quand passer au plan payant ?

Le plan Personal à 9 $/mois (1 000 crédits) devient pertinent quand :

Votre application génère un trafic régulier (plusieurs milliers de visiteurs/mois)
Vous déployez très fréquemment (plusieurs fois par jour)
Vous avez besoin de la détection de secrets ou du support prioritaire

Pour les équipes, le plan Pro à 20 $/mois par membre ajoute les builds concurrents et les analytics sur 30 jours.

Netlify vs hébergement Bolt natif : que choisir ?

Bolt propose désormais son propre hébergement natif en plus de l'intégration Netlify. Voici comment choisir :

Critère	Hébergement Bolt	Netlify
Simplicité	Un clic, zéro config	Connexion GitHub requise
Déploiement continu	Via Bolt uniquement	Automatique depuis Git
Deploy Previews	Non	Oui, illimités
Rollback	Limité	Un clic, historique complet
Variables d'environnement	Basique	Avancé (par contexte)
Domaine personnalisé	Limité	Inclus avec SSL
Contrôle du code	Dans Bolt	Git complet
MCP / Automatisation IA	Non	Oui (MCP officiel)

Notre recommandation : utilisez l'hébergement Bolt pour les prototypes rapides et les tests. Migrez vers Netlify dès que votre projet devient sérieux ou que vous avez besoin de fonctionnalités professionnelles (deploy previews, rollback, domaine custom).

Bonnes pratiques Netlify pour Vibe Coders

Après avoir accompagné des centaines de builders dans notre bootcamp Vibe Coding, voici les pratiques qui font la différence.

1. Toujours utiliser le workflow Git

Même si le drag-and-drop ou la CLI directe sont tentants, le workflow Git reste supérieur :

Historique complet de toutes les modifications
Deploy Previews automatiques sur chaque branche
Possibilité de rollback précis
Collaboration facilitée si vous travaillez en équipe

2. Configurer le fichier netlify.toml

Plutôt que de configurer via le dashboard, utilisez un fichier netlify.toml à la racine de votre projet :

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Ce fichier est versionné avec votre code : votre configuration de déploiement suit votre projet partout.

3. Séparer les variables par environnement

Netlify permet de définir des variables différentes pour la production, les deploy previews et les branches spécifiques. Utilisez cette fonctionnalité pour :

Pointer vers une base de données de test en preview
Utiliser des clés API de test en développement
Activer le mode debug uniquement sur les previews

4. Vérifier les build logs en cas d'échec

Quand un déploiement échoue, les logs de build Netlify sont votre premier réflexe. Avec le MCP Netlify, vous pouvez même demander à Claude Code de les analyser directement : « Regarde les logs du dernier déploiement et dis-moi ce qui a échoué. »

FAQ : Netlify et Vibe Coding

Netlify peut-il héberger un backend ou une base de données ?

Non, Netlify est conçu pour les applications front-end statiques et les fonctions serverless. Pour un backend ou une base de données, utilisez un service complémentaire comme Supabase, Railway ou Render. Consultez notre guide complet du déploiement pour les solutions backend.

Mon site Bolt peut-il être migré vers Netlify après coup ?

Si votre projet a été publié avec l'hébergement natif Bolt, vous ne pouvez pas le basculer directement. La solution : exportez le code vers GitHub, puis connectez ce dépôt à Netlify. Vous pouvez aussi installer Bolt en local (bolt.diy) pour un contrôle total sur le code source.

Le MCP Netlify fonctionne-t-il avec tous les éditeurs ?

Le MCP Netlify supporte Cursor, Claude Code, VS Code (avec Copilot), Windsurf, Cline, Warp et d'autres clients compatibles MCP. La liste s'enrichit régulièrement à mesure que le standard MCP gagne en adoption.

Que se passe-t-il si je dépasse les 300 crédits gratuits ?

Votre site est temporairement suspendu jusqu'au premier jour du mois suivant. Aucune facturation automatique. Vous pouvez réactiver instantanément en passant à un plan payant si nécessaire.

Conclusion

Netlify s'est imposé comme la plateforme de déploiement de référence pour le Vibe Coding, et ce n'est pas un hasard. L'intégration native avec Bolt, le déploiement via CLI depuis Cursor ou Claude Code, et surtout le MCP officiel qui permet à votre agent IA de piloter l'ensemble de l'infrastructure — tout converge vers un objectif : vous permettre de rester dans votre flow créatif sans jamais être interrompu par la complexité technique du déploiement.

Que vous débutiez avec un prototype Bolt ou que vous gériez un projet professionnel depuis Cursor, Netlify offre un chemin de progression fluide, du plan gratuit à l'infrastructure d'entreprise. Et avec le MCP, la frontière entre « coder » et « déployer » disparaît complètement.