W04
Vercel
Framework-first, Edge Network mondial, preview deployments et serverless functions.
▲ 1. Présentation de Vercel
Vercel est la plateforme créée par l'équipe de Next.js. Elle offre une expérience développeur (DX) premium avec détection automatique des frameworks et Edge Network mondial.
- Détection et optimisation automatique des frameworks
- Preview URL unique pour chaque commit
- Edge Network (200+ points de présence)
- Serverless et Edge Functions
- Tier gratuit généreux (100 GB de bande passante/mois)
🛠️ 2. Frameworks supportés
Vercel optimise automatiquement le déploiement selon le framework détecté :
| Framework | Build | Dossier output | Notes |
|---|---|---|---|
| Next.js | Automatique | .next | Support SSR natif |
| Vite / React | npm run build | dist | SPA statique |
| Vue / Nuxt | npm run build | dist/.output | SSR avec Nuxt |
| Astro | npm run build | dist | SSG/SSR hybride |
| SvelteKit | npm run build | .svelte-kit | Adapter Vercel |
💻 3. Vercel CLI
# Installation
npm install -g vercel
# Premier déploiement (interactif)
vercel
# Déploiement production
vercel --prod
# Serveur de dev local (simule les functions)
vercel dev
# Variables d'environnement
vercel env add API_KEY production
vercel env pull .env.local
vercel env ls
# Lister / rollback les déploiements
vercel ls
vercel rollback⚙️ 4. vercel.json
Le fichier vercel.json configure le comportement de déploiement.
{
"version": 2,
"buildCommand": "npm run build",
"outputDirectory": "dist",
"framework": "vite",
"routes": [
{ "src": "/api/(.*)", "dest": "/api/$1" },
{ "src": "/(.*)", "dest": "/index.html" }
],
"headers": [
{
"source": "/assets/(.*)",
"headers": [
{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
]
}
],
"regions": ["cdg1"]
}cdg1 = région Paris. Les autres régions incluent iad1 (Washington DC), sin1 (Singapore), syd1 (Sydney). Pour une app française, cdg1 minimise la latence.👁️ 5. Preview Deployments
Chaque push et chaque PR génère une URL de preview unique.
- Production :
monapp.vercel.app(alias de la dernière prod) - Par commit :
monapp-abc123.vercel.app - Par branche :
monapp-feature-login.vercel.app
Partagez l'URL de preview avec un client avant de déployer en prod. Si le client valide, un simple merge sur main déclenche le déploiement production.
⚡ 6. Serverless & Edge Functions
Créez des routes API sans serveur dans le dossier api/.
// api/hello.js — Serverless Function
export default function handler(req, res) {
res.status(200).json({ message: 'Hello from Vercel!' });
}
// api/data.js — avec paramètre de route
export default function handler(req, res) {
const { id } = req.query;
res.json({ id, data: '...' });
}
// URL : /api/data?id=123// api/edge.js — Edge Function (plus rapide)
export const config = { runtime: 'edge' };
export default function(request) {
return new Response(JSON.stringify({ ok: true }), {
headers: { 'Content-Type': 'application/json' }
});
}