Créée par les concepteurs de Next.js, la plateforme Vercel est devenue le standard mondial pour l'hébergement de sites statiques et d'applications frontend. Grâce à sa détection automatique de frameworks (Zero-Config) et son réseau Edge mondial, déployer une application Angular, Vite ou React ne prend qu'une poignée de secondes.
Vercel détecte automatiquement si votre projet est sous Angular, Vite, React ou HTML pur et adapte la commande de build.
Distribution automatique sur des dizaines de serveurs Edge avec compression Brotli native et SSL Let's Encrypt automatique.
Redirigez vos appels /api/* vers votre backend distant pour éliminer définitivement les erreurs de CORS.
Déployez directement depuis votre terminal local en tapant simplement la commande vercel sans même ouvrir de navigateur.
{
"version": 2,
"rewrites": [
// 1. Proxy transparent des requêtes API pour contourner les erreurs CORS
{
"source": "/api/(.*)",
"destination": "https://mon-api-backend.onrender.com/api/$1"
},
// 2. Routage SPA : Redirige toutes les routes virtuelles vers index.html
{
"source": "/(.*)",
"destination": "/index.html"
}
],
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "X-Content-Type-Options", "value": "nosniff" },
{ "key": "X-Frame-Options", "value": "DENY" },
{ "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
]
}
]
}Vercel s'adapte à votre manière préférée de travailler :
Sur vercel.com, cliquez sur Add New → Project et importez votre dépôt. Vercel analyse automatiquement votre package.json, sélectionne le preset (ex: Angular ou Vite) et déploie le site. Chaque git push met à jour la production automatiquement.
Ouvrez votre terminal dans le dossier du projet et exécutez simplement npx vercel. Vous répondez à 3 questions interactives et le projet est en ligne en 15 secondes. Pour publier directement en production : npx vercel --prod.
Quand votre frontend est sur https://mon-site.vercel.app et que votre API est sur https://api.onrender.com, le navigateur bloque souvent les requêtes à cause de la politique Same-Origin (CORS).
Avec le fichier vercel.json, Vercel joue le rôle d'un Reverse Proxy :
fetch('/api/produits'). Pour remplacer l'adresse par défaut mon-projet.vercel.app par votre domaine professionnel (ex: www.mon-domaine.com) :
www.monsite.fr).cname.vercel-dns.com.| Critère | Vercel | Netlify |
|---|---|---|
| Fichier de configuration | vercel.json | netlify.toml ou _redirects |
| Détection du framework | Automatique et instantanée (Zero-Config) | Excellente (demande parfois confirmation) |
| Vitesse de Build | Très rapide (optimisé avec Turborepo) | Rapide |
| Analytique Web Vitals | Intégrée nativement | Disponible via plugins |
| Plan Gratuit (Hobby) | Généreux (100 Go bande passante / mois) | Généreux (100 Go bande passante / mois) |