🚀 Claude Code comme copilote : Du Zéro au Déploiement

Tu veux créer et déployer une application web mais tu ne sais pas coder ? Ce tutoriel complet t’accompagne de A à Z en utilisant Claude Code comme assistant développeur à chaque étape. De l’installation de ton environnement jusqu’au déploiement sur Vercel, en passant par la configuration de Supabase et la connexion de webhooks n8n, tu vas apprendre à tout construire : sans écrire une seule ligne de code toi-même.

En 2025, Claude Code a révolutionné la façon dont les débutants peuvent créer des applications professionnelles. Combiné à des outils comme Supabase pour le backend, GitHub pour le versioning, Vercel pour le déploiement et n8n pour l’automatisation, cette stack permet à n’importe qui de lancer un projet web complet.

Tu ne sais pas coder ? Pas grave. Claude Code sait. Ce tuto t’accompagne étape par étape, de l’installation à la mise en ligne de ton app, en utilisant Claude Code comme assistant développeur à chaque étape.

🖥️ Besoin d’héberger n8n ? Pour suivre ce tutoriel dans les meilleures conditions, on recommande un VPS Hostinger : performant, abordable et parfait pour auto-héberger n8n avec un contrôle total sur vos données. 👉 Découvrir l’offre VPS Hostinger

Stack utilisée : Claude Code · Next.js · Supabase · GitHub · Vercel · n8n (webhooks)

💡 Tu cherches à aller plus loin avec des agents IA autonomes ? Découvre Node6, l’agence spécialisée dans la création d’agents IA livrés clé en main sous forme de micro-SaaS.

Format de chaque étape :

• 🎯 Ce qu’on fait : explication simple
• 💬 Le prompt à donner à Claude Code : copie-colle et c’est parti
• ✅ Ce qu’il faut vérifier : pour s’assurer que tout roule

---

Partie 0 : Prérequis & Installation

🎯 Ce qu’on fait

On installe tout ce qu’il faut et on crée les comptes nécessaires. C’est la seule partie un peu “manuelle” : après, Claude Code fait le gros du travail.

Comptes à créer

Service	URL	À quoi ça sert
Anthropic (Claude)	console.anthropic.com	Accès à Claude Code
GitHub	github.com	Stocker ton code en ligne
Vercel	vercel.com	Mettre ton site en ligne
Supabase	supabase.com	Base de données + authentification

💡 Conseil : Crée tes comptes GitHub en premier, puis connecte Vercel et Supabase avec ton compte GitHub. Ça simplifie tout.

Installer Node.js

Node.js est le moteur qui fait tourner tout l’écosystème JavaScript. Sans lui, rien ne fonctionne.

Ouvre Claude Desktop et demande-lui simplement :

💬 Prompt à envoyer :

Installe Node.js en version LTS sur mon ordinateur et vérifie que l'installation fonctionne.

Claude va détecter ton système (Mac, Windows, Linux), installer Node.js avec la bonne méthode et vérifier que tout est en place.

Installer Claude Desktop + Activer Claude Code

1. Télécharge Claude Desktop sur claude.ai/download
2. Installe-le et connecte-toi avec ton compte Anthropic
3. Pour activer Claude Code, ouvre ton terminal et tape :

npm install -g @anthropic-ai/claude-code

4. Puis lance Claude Code :

claude

5. Suis les instructions pour t’authentifier

✅ Vérification

Tape dans ton terminal :

claude --version

Si un numéro de version s’affiche, tu es prêt pour la suite.

---

Partie 1 : Comprendre l’écosystème

🎯 Ce qu’on fait

Avant de plonger, on prend 2 minutes pour comprendre comment les pièces du puzzle s’emboîtent.

Le schéma global

Toi + Claude Code
      │
      ▼
  Ton Code (Next.js)
      │
      ▼
  GitHub (stockage du code)
      │
      ▼
  Vercel (met en ligne automatiquement)
      │
      ▼
  🌐 Ton site est LIVE
      │
      ├──► Supabase (base de données, auth)
      └──► n8n (automatisations via webhooks)

Qui fait quoi ?

Brique	Rôle	Analogie
Claude Code	Ton développeur IA : il écrit le code pour toi	Un dev senior assis à côté de toi
Next.js	Le framework pour construire ton app/site	Les briques et le ciment
GitHub	Sauvegarde et historique de ton code	Google Drive pour le code
Vercel	Héberge et met en ligne ton site	L’hébergeur de ton site
Supabase	Base de données + système de connexion	Le back-office / stockage
n8n	Automatise des actions quand il se passe quelque chose	Un robot qui réagit aux événements

Vocabulaire minimum

• Repo (repository) : Un dossier de projet sur GitHub
• Commit : Une sauvegarde de tes modifications avec un message
• Push : Envoyer tes commits vers GitHub
• Deploy : Mettre en ligne
• Webhook : Une URL qui reçoit des notifications automatiques
• API : Un pont qui permet à deux services de se parler
• Variables d’environnement (env) : Des infos secrètes (clés API, mots de passe) qu’on ne met pas dans le code

---

Partie 2 : Créer son projet avec Claude Code

🎯 Ce qu’on fait

On crée le squelette de notre application Next.js en demandant à Claude Code de tout initialiser pour nous.

Étape 1 : Créer le dossier du projet

Dans ton terminal :

mkdir mon-projet
cd mon-projet

Étape 2 : Lancer Claude Code

claude

Étape 3 : Demander à Claude Code d’initialiser le projet

💬 Prompt à envoyer :

Initialise un projet Next.js avec App Router dans le dossier courant.
Utilise TypeScript, Tailwind CSS.
Crée une page d'accueil simple avec un titre et un paragraphe de bienvenue.
Fais le npm install à la fin.

Ce que Claude Code va faire

• Lancer npx create-next-app@latest avec les bonnes options
• Configurer TypeScript et Tailwind
• Créer une page d’accueil propre
• Installer toutes les dépendances

Étape 4 : Tester en local

💬 Prompt à envoyer :

Lance le serveur de développement

Claude Code va exécuter npm run dev. Ouvre ton navigateur sur http://localhost:3000 : tu devrais voir ta page.

✅ Vérification

• Le terminal affiche “Ready” ou “started server”
• Tu vois ta page dans le navigateur sur localhost:3000

💡 Bonnes pratiques de prompting avec Claude Code

✅ Fais ça	❌ Pas ça
Sois spécifique : “Crée un composant Header avec un logo à gauche et un menu à droite”	Vague : “Fais-moi un header”
Une tâche à la fois	10 demandes en un seul prompt
Décris le résultat attendu	Décris juste le process technique
Si erreur, copie-colle l’erreur dans le chat	“Ça marche pas”

---

Partie 3 : Supabase : le backend

🎯 Ce qu’on fait

On crée une base de données Supabase et on la connecte à notre projet. Claude Code gère la partie code.

Étape 1 : Créer un projet Supabase

1. Va sur app.supabase.com
2. Clique sur New Project
3. Choisis un nom, un mot de passe pour la base, et une région (choisis West EU si tu es en France)
4. Attends que le projet se crée (~2 min)

Étape 2 : Récupérer les clés

Une fois le projet créé, va dans Settings > API. Tu as besoin de :

• Project URL : l’adresse de ton projet (ex : https://xxxxx.supabase.co)
• anon public key : la clé publique

⚠️ Garde ces infos de côté, on en a besoin juste après.

Étape 3 : Demander à Claude Code de connecter Supabase

💬 Prompt à envoyer :

Installe @supabase/supabase-js et crée un fichier lib/supabase.ts
pour initialiser le client Supabase.
Utilise des variables d'environnement NEXT_PUBLIC_SUPABASE_URL
et NEXT_PUBLIC_SUPABASE_ANON_KEY.
Crée aussi le fichier .env.local avec des valeurs placeholder.
Ajoute .env.local au .gitignore si ce n'est pas déjà fait.

Étape 4 : Remplir les clés

Ouvre le fichier .env.local que Claude Code a créé et remplace les placeholders par tes vraies clés :

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxxxxxxxxxxxx

Étape 5 : Créer une table (exemple)

💬 Prompt à envoyer :

Crée-moi une page /test-supabase qui :
1. Se connecte à Supabase
2. Affiche un message de succès si la connexion fonctionne
3. Affiche un message d'erreur sinon

Pour créer une table côté Supabase :

1. Va dans Table Editor dans ton dashboard Supabase
2. Clique New Table
3. Crée ta table selon tes besoins (ou demande à Claude Code de te générer le SQL)

💬 Prompt optionnel :

Génère-moi le SQL pour créer une table "contacts" avec les colonnes :
id (uuid, auto), name (text), email (text), created_at (timestamp, auto).
Donne-moi la requête à coller dans l'éditeur SQL de Supabase.

✅ Vérification

• Le fichier lib/supabase.ts existe
• .env.local contient tes vraies clés
• La page /test-supabase affiche “Connexion réussie”

---

Partie 4 : GitHub : versionner son code

🎯 Ce qu’on fait

On sauvegarde tout notre code sur GitHub pour ne rien perdre et pour que Vercel puisse le récupérer automatiquement.

Étape 1 : Créer un repo sur GitHub

1. Va sur github.com/new
2. Nom du repo : mon-projet (ou ce que tu veux)
3. Laisse-le en Public ou Private selon ton choix
4. Ne coche rien (pas de README, pas de .gitignore : Claude Code a déjà tout fait)
5. Clique Create repository

Étape 2 : Demander à Claude Code de push le code

💬 Prompt à envoyer :

Initialise git dans ce projet, fais un premier commit avec tous les fichiers,
et push le tout vers mon repo GitHub : https://github.com/TON-USERNAME/mon-projet

📝 Remplace TON-USERNAME/mon-projet par ton vrai lien de repo.

Si c’est ta première fois avec git, Claude Code peut te demander de configurer ton identité :

git config --global user.name "Ton Nom"
git config --global user.email "ton@email.com"

Étape 3 : Vérifier sur GitHub

Rafraîchis la page de ton repo sur GitHub. Tu devrais voir tous tes fichiers.

Le cycle à retenir

À chaque modification future :

💬 Prompt à envoyer :

Fais un commit de mes modifications avec le message "description de ce qui a changé"
et push vers GitHub

C’est tout. Claude Code gère le git add, git commit, git push.

✅ Vérification

• Ton code est visible sur GitHub
• Le fichier .env.local n’apparaît PAS sur GitHub (c’est normal et voulu)

---

Partie 5 : Déployer sur Vercel

🎯 Ce qu’on fait

On connecte Vercel à GitHub pour que chaque push déploie automatiquement ton site en ligne.

Étape 1 : Importer le projet sur Vercel

1. Va sur vercel.com/new
2. Connecte ton compte GitHub si pas encore fait
3. Sélectionne ton repo mon-projet
4. Vercel détecte automatiquement que c’est du Next.js

Étape 2 : Configurer les variables d’environnement

Avant de déployer, Vercel a besoin de tes clés Supabase :

1. Dans l’écran d’import, clique sur Environment Variables
2. Ajoute :

Name	Value
NEXT_PUBLIC_SUPABASE_URL	https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY	eyJxxxxxxxxxxxxx

3. Clique Deploy

Étape 3 : Premier déploiement

Vercel va :

1. Récupérer ton code depuis GitHub
2. Installer les dépendances
3. Builder le projet
4. Le mettre en ligne

En ~1 minute, tu reçois une URL du type : https://mon-projet.vercel.app

🎉 Ton site est en ligne.

Le cycle automatique

À partir de maintenant, le flow est :

Tu modifies le code avec Claude Code
        │
        ▼
Claude Code push vers GitHub
        │
        ▼
Vercel détecte le push automatiquement
        │
        ▼
Vercel rebuild et redéploie
        │
        ▼
🌐 Ton site est à jour en ~1 min

Tu n’as plus jamais besoin d’aller sur Vercel manuellement.

💡 Tu veux automatiser encore plus ? Génère tes workflows n8n et Make en quelques secondes avec le générateur de workflows IA.

En cas de problème de build

💬 Prompt à envoyer à Claude Code :

Le déploiement Vercel a échoué avec cette erreur :

[colle ici l’erreur depuis le dashboard Vercel]

Corrige le problème.

✅ Vérification

• Tu as une URL .vercel.app qui fonctionne
• Ton site affiche la même chose qu’en local
• La connexion Supabase fonctionne aussi en production

---

Partie 6 : n8n : connecter l’app via webhooks

🎯 Ce qu’on fait

On connecte notre application à n8n pour déclencher des automatisations quand quelque chose se passe dans l’app (nouveau contact, formulaire soumis, action utilisateur…).

📖 Tu n’as pas encore installé n8n ? Consulte notre guide complet d’installation n8n pour démarrer en quelques minutes.

Comprendre le principe

Un événement se passe dans ton app
(ex : un utilisateur remplit un formulaire)
        │
        ▼
Ton app envoie une requête HTTP vers une URL
        │
        ▼
n8n reçoit la requête via un node Webhook
        │
        ▼
n8n exécute un workflow
(envoyer un email, créer une fiche, notifier Slack…)

C’est comme une sonnette : ton app appuie dessus, n8n entend et réagit.

Étape 1 : Créer un webhook dans n8n

1. Ouvre n8n
2. Crée un nouveau workflow
3. Ajoute un node Webhook
4. Configure-le en POST
5. Copie l’URL de production du webhook (pas celle de test)

L’URL ressemble à : https://ton-n8n.com/webhook/abc-123-def

Étape 2 : Demander à Claude Code d’envoyer les events

💬 Prompt à envoyer :

Crée une fonction utilitaire sendWebhook dans lib/webhook.ts qui :
- Prend en paramètre un type d'événement (string) et des données (objet)
- Envoie une requête POST vers l'URL stockée dans
  la variable d'environnement WEBHOOK_N8N_URL
- Gère les erreurs silencieusement (ne bloque pas l'app si n8n est down)
- Envoie le timestamp automatiquement

Étape 3 : Ajouter l’URL du webhook dans les variables

Ajoute dans .env.local :

WEBHOOK_N8N_URL=https://ton-n8n.com/webhook/abc-123-def

⚠️ N’oublie pas de l’ajouter aussi dans Vercel (Settings > Environment Variables) pour que ça marche en production.

Étape 4 : Utiliser le webhook dans l’app

💬 Prompt à envoyer :

Utilise la fonction sendWebhook pour envoyer un événement
"new_contact" avec les données du formulaire à chaque soumission.

Étape 5 : Tester le flow

1. Dans n8n, clique sur Listen for test event sur le node Webhook
2. Soumets un formulaire dans ton app (en local ou en prod)
3. Vérifie que n8n reçoit les données
4. Construis la suite du workflow dans n8n (envoyer un mail, une notif, etc.)

Alternative : Webhook Supabase → n8n

Si tu veux réagir directement aux changements dans la base de données (sans passer par ton app) :

1. Dans Supabase, va dans Database > Webhooks
2. Crée un webhook qui pointe vers ton URL n8n
3. Choisis le trigger : INSERT, UPDATE, ou DELETE sur une table

Cette approche est utile quand tu veux automatiser sans modifier le code de ton app.

✅ Vérification

• n8n reçoit bien les données quand tu fais une action dans l’app
• Le workflow n8n se déclenche correctement
• Ça marche aussi depuis l’URL Vercel (production)

---

Partie 7 : Récap & Troubleshooting

🎯 Checklist complète

• [ ] Node.js installé (node -v fonctionne)
• [ ] Claude Code installé (claude --version fonctionne)
• [ ] Projet Next.js créé et fonctionnel en local
• [ ] Supabase connecté avec les bonnes clés
• [ ] Code sur GitHub
• [ ] Site déployé sur Vercel
• [ ] Variables d’environnement configurées sur Vercel
• [ ] Webhook n8n connecté et testé

🔧 Erreurs fréquentes et solutions

“Module not found”

💬 Prompt Claude Code :

J'ai l'erreur "Module not found: [nom du module]". Installe-le et corrige les imports.

“NEXT_PUBLIC_SUPABASE_URL is undefined”

Le fichier .env.local n’est pas lu. Vérifie :

• Que le fichier est bien à la racine du projet
• Que tu as redémarré le serveur (npm run dev)
• Que les noms commencent bien par NEXT_PUBLIC_

Le push GitHub échoue

💬 Prompt Claude Code :

Le push git échoue avec cette erreur : [colle l'erreur]. Aide-moi à résoudre.

Souvent c’est un problème d’authentification. Claude Code te guidera pour configurer un token GitHub.

Le build Vercel plante

Copie les logs d’erreur depuis le dashboard Vercel et colle-les à Claude Code. Les erreurs les plus courantes :

• Une dépendance manquante
• Une variable d’environnement oubliée
• Une erreur TypeScript ignorée en local mais bloquante en build

Le webhook n8n ne reçoit rien

• Vérifie que l’URL est la bonne (production, pas test)
• Vérifie que la variable WEBHOOK_N8N_URL est bien définie
• Teste avec un outil comme webhook.site pour voir si ton app envoie bien la requête

📚 Ressources pour aller plus loin

Sujet	Ressource
Claude Code	docs.anthropic.com
Claude Code sur le web	Article complet sur IA Insights
Claude AI	Fiche outil IA Insights
Next.js	nextjs.org/docs
Supabase	supabase.com/docs
Vercel	vercel.com/docs
Vercel v0 (génération UI IA)	Fiche outil IA Insights
n8n	docs.n8n.io
Guide d’installation n8n	Tuto complet IA Insights
n8nChat (assistant IA pour n8n)	Fiche outil IA Insights
Générateur de workflows n8n & Make	app.ia-insights.fr
Outils d’automatisation IA	Catégorie IA Insights
Outils low-code / no-code	Catégorie IA Insights
Outils de développement IA	Catégorie IA Insights
Tous les tutoriels IA	Tutoriels IA Insights
Agents IA autonomes (Node6)	node6.ai

🤖 Besoin d’un agent IA sur-mesure ? Node6 conçoit des agents IA autonomes livrés comme des micro-SaaS complets : avec dashboard, documentation et déploiement inclus. Découvre les services Node6 et la stack technique utilisée.

🔄 Le flow au quotidien

Une fois tout en place, ton workflow quotidien devient :

1. Ouvre ton terminal dans le dossier du projet
2. Lance Claude Code : claude
3. Décris ce que tu veux modifier ou ajouter
4. Claude Code écrit le code
5. Teste en local (npm run dev)
6. Dis à Claude Code : "commit et push"
7. Vercel déploie automatiquement
8. ☕ Bois un café, c'est en ligne

---

Tu as suivi tout le tuto ? Bravo, tu as maintenant une app en ligne, connectée à une base de données, avec des automatisations n8n : le tout construit avec Claude Code sans écrire une seule ligne de code toi-même. 🚀

---

❓ FAQ : Questions fréquentes