Next.js 16 Leçon 9 : Déploiement Vercel, VPS et Build Adapters

Les options de déploiement

Next.js 16 peut être déployé de plusieurs façons selon vos besoins et contraintes. La plus simple reste Vercel (créé par les mêmes équipes), mais vous pouvez déployer sur n’importe quelle plateforme grâce aux Build Adapters introduits en Next.js 16.

Options de déploiement

Vercel         → Déploiement en 1 clic, CDN global, auto-scaling
Node.js server → VPS, serveur dédié, next start
Docker         → Conteneur portable, Kubernetes, cloud custom
Static export  → HTML/CSS/JS purs, hébergement S3, GitHub Pages
Build Adapters → Cloudflare, Netlify, AWS Lambda... (Next.js 16)

Déployer sur Vercel

Vercel est la plateforme de référence pour Next.js : déploiement automatique à chaque push, preview par branche, CDN global, et toutes les fonctionnalités de Next.js supportées nativement.

Terminal Déploiement Vercel en 3 étapes

# 1. Installer la CLI Vercel
npm install -g vercel

# 2. Lier votre projet (première fois)
vercel

# 3. Déployer en production
vercel --prod

# Ou connectez GitHub → déploiement automatique à chaque push

Variables d’environnement

Les variables d’environnement sont gérées via des fichiers .env. La règle de nommage détermine leur disponibilité :

Bash .env.local — jamais committé dans git

# Accessible uniquement côté serveur (Server Components, API routes)
DATABASE_URL=postgresql://user:pass@host/db
JWT_SECRET=un-secret-tres-long
STRIPE_SECRET_KEY=sk_live_...

# Accessible côté client ET serveur (préfixe NEXT_PUBLIC_)
NEXT_PUBLIC_API_URL=https://api.monsite.com
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

⚠️

Ne jamais exposer les secrets avec NEXT_PUBLIC_

Tout ce qui commence par NEXT_PUBLIC_ est inclus dans le bundle JavaScript envoyé au navigateur — visible par tous. N’y mettez jamais une clé d’API secrète, un mot de passe ou un token. Seules les valeurs non-sensibles (URL d’API publique, ID Analytics) doivent y être.

Déployer sur un VPS avec Node.js

Terminal Sur votre VPS (Ubuntu/Debian)

# Installer Node.js 20
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# Cloner et builder
git clone https://github.com/vous/mon-projet.git
cd mon-projet
npm install
npm run build

# Lancer en production
npm run start  # écoute sur le port 3000

# Garder le process actif avec PM2
npm install -g pm2
pm2 start npm --name "nextjs" -- start
pm2 startup  # démarrage automatique au reboot

Dockerfile pour Next.js 16

Docker Dockerfile

FROM node:20-alpine AS base

# Dépendances
FROM base AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci

# Build
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# Production
FROM base AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

Build Adapters API (Next.js 16)

Next.js 16 introduit les Build Adapters en alpha : ils permettent à des plateformes tierces (Cloudflare Workers, Netlify, AWS Lambda) d’adapter le build à leur runtime spécifique. Vous n’avez généralement pas à les écrire vous-même — les plateformes les fournissent.

TypeScript Utiliser un adapter existant — next.config.ts

const nextConfig: NextConfig = {
  experimental: {
    // Exemple : adapter Cloudflare (fourni par Cloudflare)
    adapterPath: require.resolve('@cloudflare/next-on-pages/adapter'),
  },
};

Checklist avant mise en production

Checklist

✅ Variables d'env configurées sur la plateforme (pas seulement en local)
✅ .env.local dans le .gitignore
✅ npm run build réussit sans erreurs TypeScript
✅ Métadonnées SEO (title, description, og:image) sur chaque page
✅ Images via next/image (pas de <img> bruts)
✅ Polices via next/font (pas d'import Google côté client)
✅ Erreurs 404 personnalisées (not-found.tsx)
✅ Score Lighthouse > 90 en Performance, SEO, Accessibilité

Exercice pratique

Créez un fichier .env.local avec une variable secrète et une variable NEXT_PUBLIC_
Utilisez la variable secrète dans un Server Component et NEXT_PUBLIC_ dans un Client Component — vérifiez que l’accès fonctionne dans les deux cas
Lancez npm run build et lisez le résumé des pages générées (statiques vs dynamiques)
Créez un compte Vercel gratuit et déployez votre projet depuis GitHub en connectant le dépôt
Ajoutez vos variables d’environnement dans l’interface Vercel (Settings → Environment Variables) et redéployez