← Retour aux articles
Ecosystem VercelNext.jsDevOps

Vercel : déployer des applications Next.js sans configuration

· 4 min de lecture

Le déploiement ne devrait pas être une tâche. Ça devrait être un effet de bord du push de code. Vercel rend ça réel pour les applications Next.js en gérant les builds, la distribution CDN, les fonctions serverless et les environnements de preview automatiquement. Connecter un dépôt Git, pousser un commit, et l’application est live sur un réseau edge global en quelques secondes. Pas de Dockerfiles, pas de configs Nginx, pas de pipelines CI à maintenir.

Git push vers la production

Vercel surveille le dépôt. Chaque push sur la branche principale déclenche un déploiement en production. Chaque push sur une branche feature crée un déploiement de preview isolé avec sa propre URL. Les pull requests reçoivent un commentaire automatique avec le lien de preview.

git push origin main
# Le déploiement production démarre automatiquement

git push origin feature/new-landing
# Preview à feature-new-landing-abc123.vercel.app

Les déploiements de preview sont des environnements complets qui tournent sur exactement la même infrastructure que la production. Ils ne partagent rien avec les autres previews ni avec le déploiement principal. Ce qui permet aux designers, product managers et QA de reviewer les changements sur une vraie URL avant que quoi que ce soit ne soit mergé.

Fonctions serverless et edge

Vercel déploie les API routes et les server components Next.js en fonctions serverless automatiquement. Chaque route handler devient une fonction isolée qui scale indépendamment. Pas de capacity planning, pas de serveurs inactifs.

import { NextResponse } from 'next/server';

export async function GET() {
  const projects = await db.project.findMany({
    orderBy: { createdAt: 'desc' },
  });
  return NextResponse.json(projects);
}

Pour les opérations sensibles à la latence comme les redirections, les vérifications d’authentification ou l’A/B testing, les Edge Functions tournent sur le data center le plus proche de l’utilisateur au lieu d’une seule région :

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const locale = request.headers.get('accept-language')?.startsWith('fr') ? 'fr' : 'en';
  return NextResponse.rewrite(new URL(`/${locale}${request.nextUrl.pathname}`, request.url));
}

export const config = { matcher: ['/((?!api|_next|favicon.ico).*)'] };

Ce middleware tourne à l’edge dans ~50 régions à travers le monde. L’utilisateur touche la plus proche, ce qui signifie que la détection de locale et le routing se font avant même que la requête n’atteigne le serveur d’origine.

Variables d’environnement et secrets

Vercel sépare les variables d’environnement par contexte : production, preview et development. Les secrets définis dans le dashboard sont chiffrés et injectés au build time ou au runtime selon leur préfixe.

vercel env add DATABASE_URL production
vercel env add NEXT_PUBLIC_API_URL production preview development

Les variables préfixées par NEXT_PUBLIC_ sont exposées au bundle navigateur. Tout le reste reste côté serveur. Cette séparation empêche les fuites accidentelles de credentials de base de données ou de clés API dans le JavaScript côté client, une erreur courante sur les applications React et Next.js.

Analytics et Web Vitals

Vercel Analytics collecte les Core Web Vitals depuis les vrais utilisateurs sans script tiers. LCP, FID, CLS et TTFB sont trackés par route et par déploiement, ce qui rend triviale la détection de régressions de performance introduites par un commit spécifique.

import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

Deux composants, zéro configuration. Les données alimentent le dashboard Vercel où la performance est ventilée par page, appareil et géographie. Quand un déploiement fait chuter le score de performance Lighthouse, la cause est visible immédiatement.

Conclusion

Vercel supprime la charge opérationnelle du déploiement et du scaling des applications Next.js. Déploiements basés sur Git, previews automatiques, scaling serverless, edge functions et analytics intégrés couvrent tout le cycle de vie du push de code au monitoring en production. Pour les développeurs frontend et full-stack TypeScript, c’est le chemin le plus rapide du développement local à une application distribuée globalement.