Il y a quelques heures, ton app tournait uniquement sur ton ordinateur — visible par toi seul, accessible sur localhost:3000. Le batiment etait fini, solide, fonctionnel. Mais les portes etaient fermees, les rideaux tires. Personne ne savait qu'il existait. Maintenant que le code est sur GitHub, on peut faire ce que tout promoteur attend depuis le premier coup de marteau : couper le ruban. Ouvrir les portes. Donner une adresse au batiment pour que le monde entier puisse venir y entrer.
Dans cette fiche, tu connectes Vercel a ton repo GitHub, tu configures les acces dont ton app a besoin, et tu obtiens une URL publique. N'importe qui pourra utiliser ton app en cliquant sur un lien.
Ton app ne peut pas tourner sur ton ordi pour tout le monde en meme temps. Il lui faut un serveur — un ordinateur qui reste allume 24h/24 et repond aux requetes. Vercel fournit ce serveur, gratuitement pour les projets personnels, en quelques clics.
Ce qui rend Vercel particulierement adapte ici :
| Ce que Vercel fait | Ce que ca change pour toi |
|---|---|
| Detecte automatiquement Next.js | Pas de configuration a faire |
| Se connecte directement a GitHub | Chaque push redéploie ton app automatiquement |
| Genere une URL publique | Tu partages un lien, pas des fichiers |
| Gratuit pour les projets personnels | Tu ne paies rien |
Un compte GitHub avec ton projet deja pousse (fiche precedente). Un email pour creer ton compte Vercel.
En te connectant avec GitHub, Vercel voit directement tes projets. C'est ce qui permet le deploiement automatique.
Si ton app utilise Supabase (base de donnees, authentification), elle a besoin de ses cles d'acces pour fonctionner sur Vercel. Sans ca : page blanche ou erreur au demarrage.
Ton fichier .env.local contient ces cles. Ce fichier n'a pas ete envoye sur GitHub — c'est normal et voulu, car il contient des informations sensibles. Mais Vercel en a besoin. Il faut les lui donner directement.
Dans l'ecran de configuration du projet sur Vercel, cherche la section Environment Variables. Pour chaque ligne de ton .env.local :
Repete pour chaque variable.
Ouvre le fichier .env.local dans Cursor — il est dans ton dossier projet. Chaque ligne suit le format NOM=valeur. Copie-les toutes, sans modifier.
Pour plus de details sur la gestion des secrets : [[ref:secrets]]
Clique sur Deploy.
Une barre de progression s'affiche. Vercel lit ton code, installe les dependances, construit l'app. Ca prend entre 30 secondes et 2 minutes.
Quand c'est termine, Vercel t'affiche une URL. Quelque chose comme mon-app.vercel.app.
Clique dessus.
Ton app est la. En ligne. Visible par n'importe qui dans le monde.
Pas parce que tu sais coder — parce que tu sais CONSTRUIRE.
Copie cette URL. Envoie-la a quelqu'un. C'est reel.
A partir de maintenant, chaque fois que tu pousses du code sur GitHub, Vercel redéploie automatiquement ton app. Tu n'as plus besoin de revenir sur Vercel.
Le cycle devient :
Code, commit, push, deploye. Quatre etapes que tu n'as meme plus besoin de penser — elles s'enchainent seules.
Les erreurs de deploiement sont les plus frequentes et les plus stressantes — parce qu'on ne voit pas toujours pourquoi ca plante. Voici les cas les plus courants :
| Symptome | Cause probable | Solution |
|---|---|---|
| Page blanche apres deploiement | Variables d'environnement manquantes ou mal copiees | Va dans Settings puis Environment Variables, verifie chaque variable. La moindre faute de frappe dans le nom bloque tout. Redeploie apres correction (onglet Deployments puis Redeploy) |
| Erreur de build — "Build failed" | Erreur dans le code ou dependance manquante | Clique sur le deploiement echoue dans l'onglet Deployments, lis le log. Cherche le message d'erreur en rouge. Copie-le et demande a Claude : "J'ai cette erreur sur Vercel : [erreur]. Comment je la corrige ?" |
| "Application error" ou "500" | L'app tourne mais plante au demarrage | Verifie dans Vercel la section Functions pour les logs d'erreur runtime. Cause la plus frequente : variable d'environnement presente mais avec une mauvaise valeur |
| Le repo n'apparait pas dans Vercel | Vercel n'a pas acces a ce repo | Sur GitHub, va dans Settings puis Applications puis Vercel, et autorise l'acces au repo manquant |
| "404 Not Found" sur certaines pages | Probleme de routing Next.js | Verifie que ton projet utilise bien l'App Router et que le deploiement s'est termine sans erreur |
| L'app marche en local mais pas sur Vercel | Difference d'environnement | Les variables d'environnement sont la cause principale. Verifie aussi que tu n'utilises pas de fichiers locaux qui n'existent pas sur Vercel |
Tout se trouve dans les logs. Sur Vercel, clique sur le deploiement concerné, puis sur View Build Logs ou View Function Logs. Le message d'erreur exact est la — copie-le entierement et donne-le a Claude.
Ton app est en ligne. Tu as une URL a partager. Il reste a faire le bilan — regarder ce que tu as appris, mesurer le chemin parcouru, et comprendre ce que tu peux construire maintenant.
-> Fiche suivante : Et maintenant ?