De la migration à la production en 30 minutes
Votre projet est migré avec ViteToNext.AI ? Parfait ! Maintenant, déployons-le sur Vercel pour une mise en production optimale.
Pourquoi Vercel après Next.js ?
Avantages natifs
- Zero-config : Détection automatique Next.js
- Edge Network : CDN mondial intégré
- Serverless Functions : API Routes automatiques
- Preview Deployments : URL unique par commit
- Analytics intégrées : Métriques temps réel
Étape 1 : Préparation du projet (5 min)
Vérifications pré-déploiement
- ✅
next buildfonctionne sans erreur - ✅ Variables d'environnement listées
- ✅ API Routes testées localement
- ✅ Domaine disponible (optionnel)
Configuration next.config.js optimale
/** @type {import('next').NextConfig} */
const nextConfig = {
// Optimisations Vercel
output: 'standalone',
// Images externes
images: {
domains: ['votre-cdn.com'],
formats: ['image/webp', 'image/avif'],
},
// Headers de sécurité
async headers() {
return [
{
source: '/(.*)',
headers: [
{
key: 'X-Content-Type-Options',
value: 'nosniff',
},
{
key: 'X-Frame-Options',
value: 'DENY',
},
{
key: 'X-XSS-Protection',
value: '1; mode=block',
},
],
},
]
},
}
module.exports = nextConfig
Étape 2 : Déploiement initial (10 min)
Méthode 1 : Via GitHub (recommandée)
- Push votre code sur GitHub
- Connectez-vous à vercel.com
- Cliquez "New Project"
- Sélectionnez votre repository
- Vercel détecte automatiquement Next.js
- Cliquez "Deploy" 🚀
Méthode 2 : Via ViteToNext.AI (ultra-rapide)
- Utilisez la fonction "Deploy to Vercel" intégrée
- Authentification Vercel en un clic
- Déploiement automatique depuis l'interface
Étape 3 : Configuration avancée (10 min)
Variables d'environnement
Dans le dashboard Vercel :
- Allez dans Settings > Environment Variables
- Ajoutez vos variables par environnement
# Production
DATABASE_URL=postgresql://...
NEXTAUTH_SECRET=your-secret-key
NEXT_PUBLIC_API_URL=https://api.yourapp.com
# Preview/Development
DATABASE_URL=postgresql://staging...
NEXTAUTH_SECRET=staging-secret
NEXT_PUBLIC_API_URL=https://staging-api.yourapp.com
Domaine personnalisé
- Settings > Domains
- Ajoutez votre domaine
- Configurez les DNS chez votre registrar :
| Type | Name | Value |
|---|---|---|
| CNAME | www | cname.vercel-dns.com |
| A | @ | 76.76.19.61 |
Étape 4 : Optimisations production (5 min)
Analytics Vercel
- Activez Analytics dans Settings
- Ajoutez le package :
npm i @vercel/analytics - Intégrez dans votre app :
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Analytics />
</body>
</html>
)
}
Speed Insights
// Ajoutez aussi
import { SpeedInsights } from '@vercel/speed-insights/next'
// Dans le layout
<SpeedInsights />
Monitoring et métriques
Dashboards disponibles
- Functions : Temps d'exécution des API Routes
- Analytics : Trafic, pages vues, conversions
- Speed Insights : Core Web Vitals temps réel
- Logs : Debugging en temps réel
Alertes intelligentes
Configurez des alertes pour :
- Temps de réponse > 3s
- Taux d'erreur > 1%
- Usage quota dépassé
- Domaine SSL expiré
Optimisations avancées
ISR (Incremental Static Regeneration)
// app/blog/[slug]/page.tsx
export const revalidate = 3600 // 1 heure
export default async function BlogPost({ params }) {
const post = await getBlogPost(params.slug)
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
)
}
Edge Config (cache global)
// Stockage clé-valeur ultra-rapide
import { get } from '@vercel/edge-config'
export default async function handler() {
const featureFlags = await get('featureFlags')
return Response.json(featureFlags)
}
Checklist post-déploiement
Tests de production
- ✅ Toutes les pages se chargent
- ✅ API Routes fonctionnelles
- ✅ Images optimisées (format WebP)
- ✅ SSL actif (HTTPS)
- ✅ Redirections www → non-www
- ✅ Sitemap accessible (/sitemap.xml)
- ✅ Robots.txt configuré
Performance Lighthouse
- Performance : > 90
- Accessibility : > 95
- Best Practices : > 95
- SEO : 100
Coûts et limites
Plan Hobby (gratuit)
- 100GB bandwidth/mois
- 1000 serverless functions executions
- Parfait pour la plupart des projets
Plan Pro (20$/mois)
- 1TB bandwidth
- Executions illimitées
- Analytics avancées
- Priorité support
Déploiement multi-environnement
Branches automatiques
- main → Production
- staging → Preview staging
- develop → Preview développement
CI/CD intégré
- Build automatique à chaque push
- Tests avant déploiement
- Rollback en un clic
- Preview URLs partagées
🎉 Félicitations !
Votre application Next.js est maintenant en production sur Vercel avec toutes les optimisations activées.
- ✅ Performance maximale
- ✅ SEO optimisé
- ✅ Monitoring actif
- ✅ Scalabilité automatique
Migration + Déploiement en un clic
ViteToNext.AI peut migrer ET déployer votre projet sur Vercel automatiquement. De Vite à la production en 15 minutes.
Migrer et déployer