Construire et déployer une application Next.js avec Claude, Vercel et Supabase

Un guide pratique pour configurer Terminal, VS Code, GitHub, Claude Code, Vercel et Supabase — d'un simple blog avec CMS à une véritable application de gestion de tables. Ce guide vous accompagne à travers chaque outil avec de vrais prompts IA que vous pouvez utiliser immédiatement.

Tool	Role	Free Tier
⌨️ Terminal	Local dev environment — shell, Node.js, Git, package manager	✓ Always free
VS Code	Editor + AI integration — extensions, workspace config, inline completions	✓ Always free
GitHub	Source control + CI/CD — branches, PRs, Actions workflows	✓ Unlimited public repos
Claude Code	AI pair programmer — reads your codebase, writes files, runs commands	✓ Free tier available
Supabase	DB + Auth + Storage — Postgres, Row Level Security, Realtime	✓ 2 projects, 500MB DB
Vercel	Hosting + CDN — auto-deploy on push, edge functions, preview URLs	✓ 100GB bandwidth/mo
Cloudflare	Edge hosting + CDN — Pages for static/SSR, Workers for serverless logic	✓ Unlimited requests
✦Penpot	UI design tool — open-source Figma alternative, design-to-code	✓ Always free
✦CodeSandbox	Cloud dev environment — open any GitHub repo instantly, no local setup	✓ Free personal use

✦ Penpot : concevoir avant de construire

Avant d'écrire une seule ligne de code, esquissez votre interface dans Penpot — l'alternative à Figma open source et basée navigateur, entièrement gratuite. Clarifier d'abord vos mises en page et la structure de vos composants fait gagner des heures de refactorisation plus tard.

01 — GitHub : contrôle de version et CI/CD

GitHub est l'endroit où vit votre code, où les coéquipiers collaborent, et où les déploiements sont déclenchés. Configurer correctement votre dépôt dès le premier jour évite bien des maux de tête plus tard.

# Authenticate, create repo, and push
gh auth login
git init && git add . && git commit -m "init"
gh repo create my-blog --public --source=. --push

# Force a redeploy on Vercel without a code change
git commit --allow-empty -m "redeploy"
git push

brew install glab          # macOS
sudo apt install glab -y   # Ubuntu / WSL2

glab auth login
glab repo create my-blog --public
git remote set-url origin https://gitlab.com/yourname/my-blog.git
git push -u origin main

02 — Terminal et Claude Code

Tout commence par une bonne configuration de terminal. Mettre en place votre shell, Node.js et Git prend environ 10 minutes — et vous prépare pour tout ce qui suit.

# macOS — Install Homebrew, then essentials
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node git gh
npm install -g pnpm

# Windows — Install WSL2 (run in PowerShell as Administrator)
wsl --install
# After restart, open Ubuntu and run:
sudo apt update && sudo apt install nodejs npm git -y
npm install -g pnpm gh

# Verify installs
node --version && git --version && gh --version

# Clone an existing repo to a new machine
git clone https://github.com/yourname/my-blog.git
cd my-blog && pnpm install

Claude Code est un agent IA natif au terminal qui lit l'intégralité de votre codebase, écrit des fichiers, exécute des commandes, et itère jusqu'à ce que la fonctionnalité marche. C'est le multiplicateur qui fait qu'un seul développeur se sent comme une équipe entière.

npm install -g @anthropic-ai/claude-code
cd my-blog && claude

✦ VS Code : votre éditeur

VS Code est plus qu'un éditeur de texte — avec les bonnes extensions et les bons réglages, il devient un IDE qui comprend l'intégralité de votre codebase. La clé est de le configurer une fois, correctement.

code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
code --install-extension anthropics.claude-code
code --install-extension rangav.vscode-thunder-client
code --install-extension eamodio.gitlens

Extensions essentielles :

• IA hybride — Hugging Face et Claude — faites tourner un agent Hugging Face auto-hébergé pour les audits, la documentation, la recherche, les revues, les PR et les plans, tout en réservant Claude Code aux refactorisations, bugs et migrations. Inclut des prompts Claude Code pour chaque domaine de travail et une comparaison de coûts montrant combien vous économisez.
• Prettier + ESLint — gardez le code propre automatiquement. Prettier formate à l'enregistrement, ESLint détecte les bugs avant qu'ils n'atteignent vos coéquipiers.
• Thunder Client — testez vos routes API sans quitter l'éditeur. Une alternative légère à Postman intégrée directement.
• GitLens — comprenez l'historique de chaque ligne d'un coup d'œil. Survolez n'importe quelle ligne pour voir qui l'a écrite, quand, et pourquoi.

03 — Vercel : déployez en 30 secondes

Vercel est la maison de Next.js et le moyen le plus rapide de mettre votre application en ligne. Connectez votre dépôt GitHub une fois, et chaque push sur main se déploie automatiquement.

npm install -g vercel && vercel
# Or connect GitHub at vercel.com/new — 3 clicks

Après le déploiement, retournez dans Supabase → Authentication → URL Configuration et ajoutez votre URL Vercel en production à la liste des Redirect URLs.

✦ Cloudflare Pages : l'alternative à Vercel

Cloudflare Pages est une alternative convaincante à Vercel — surtout si vous voulez une diffusion edge mondiale, zéro cold start, et aucun plafond de bande passante. Il se connecte à GitHub tout comme Vercel et se déploie automatiquement à chaque push sur main. La différence clé : votre application tourne sur le réseau edge de Cloudflare dans plus de 300 emplacements plutôt que sur une poignée de régions serverless.

# Install the adapter for Next.js on Cloudflare
npm install --save-dev @cloudflare/next-on-pages

# Add the build script to package.json
# "build:cf": "next build && npx vercel-build"

# Deploy via CLI
npx wrangler pages deploy .vercel/output/static
# Or connect GitHub at pages.cloudflare.com — same 3-click flow as Vercel

04 — Supabase : votre backend prêt à l'emploi

Supabase vous donne Postgres, l'authentification, le stockage de fichiers et les abonnements en temps réel — le tout avec des types TypeScript générés automatiquement et un niveau gratuit généreux.

brew install supabase/tap/supabase
pnpm add @supabase/supabase-js @supabase/ssr
supabase gen types typescript --project-id YOUR_ID > types/database.ts

Checklist de configuration de l'authentification :

• L'authentification par e-mail est activée — vérifiez sous Providers → Email.
• L'URL du site est définie — allez dans Authentication → URL Configuration et définissez votre domaine de production.
• Les Redirect URLs sont configurées — ajoutez à la fois http://localhost:3000/** et votre URL Vercel à la liste des Redirect URLs. Sans cela, les liens magiques seront bloqués.
• Les clés API sont dans Vercel — copiez NEXT_PUBLIC_SUPABASE_URL et NEXT_PUBLIC_SUPABASE_ANON_KEY depuis Project Settings → API, puis ajoutez-les aux variables d'environnement Vercel.

✦ CodeSandbox : codez de n'importe où

CodeSandbox vous permet d'ouvrir n'importe quel dépôt GitHub dans un environnement de développement cloud complet — aucune installation locale requise. Parfait pour des modifications rapides en déplacement, l'intégration de contributeurs, ou tester une branche sur une machine qui n'a pas votre environnement de développement.

Préfixez simplement n'importe quelle URL GitHub par codesandbox.io/p/github/ et votre dépôt s'ouvre dans un éditeur façon VS Code avec un serveur de développement en cours d'exécution, un accès terminal, et une intégration de prévisualisation Vercel intégrée.

# Open any GitHub repo in CodeSandbox instantly:
# https://codesandbox.io/p/github/yourname/my-blog

# Or install the browser extension to add an
# "Open in CodeSandbox" button on every GitHub repo page

# Devboxes persist your environment — install deps once,
# resume your session later exactly where you left off

Si vous cherchez une application prête à l'emploi construite exactement sur cette pile, Open Technology App est une plateforme de file de tâches et de gestion de workflow auto-hébergée sur Vercel et Supabase — gratuite pour démarrer.