Déployer sur Vercel, Netlify et d'autres plateformes

Après avoir créé une application Next.js, une étape clé est de la déployer dans l'environnement de production. Dans ce module, nous allons examiner différentes plateformes d'hébergement qui offrent un environnement optimisé pour les applications Next.js, avec une attention particulière pour Vercel - la plateforme créée par les auteurs de Next.js.

Déployer sur Vercel

Vercel est une plateforme qui offre le meilleur support natif pour les applications Next.js, car les deux technologies sont développées par la même entreprise. Cela garantit un support optimal de toutes les fonctionnalités de Next.js, des déploiements automatisés et un CDN mondial.

Préparer le projet

Avant de déployer, assure-toi que ton projet est prêt pour la production :

1. Vérifier les variables d'environnement - assure-toi que toutes les variables d'environnement sont correctement configurées
2. Optimisation initiale - lance next build en local pour vérifier d'éventuelles erreurs
3. Contrôle de version - assure-toi que le projet est dans un dépôt Git (GitHub, GitLab ou Bitbucket)

Étape par étape : déployer sur Vercel

1. Crée un compte sur Vercel

   • Va sur vercel.com et inscris-toi, de préférence avec un compte GitHub/GitLab/Bitbucket

2. Importe le projet

   • Une fois connecté, clique sur "Add New..." > "Project"
   • Choisis ton dépôt dans la liste

3. Configuration du déploiement

   • Vercel détecte automatiquement que le projet est une application Next.js
   • Tu peux personnaliser le nom du projet, la branche de déploiement et les variables d'environnement
   • Pour les projets Next.js standards, les paramètres par défaut suffisent généralement

4. Déploiement

   • Clique sur "Deploy"
   • Vercel builde et déploie ton application en l'optimisant pour la production

5. Vérification du déploiement

   • Après un déploiement réussi, tu reçois une URL unique
   • Vérifie ton application et assure-toi que tout fonctionne correctement

Configurer un domaine personnalisé

Pour configurer un domaine personnalisé pour ton projet sur Vercel :

1. Va dans le panneau du projet
2. Sélectionne l'onglet "Domains"
3. Clique sur "Add" et saisis ton nom de domaine
4. Suis les instructions pour configurer les enregistrements DNS :
   • Pour les domaines racine (par ex. example.com) : crée un enregistrement A pointant vers l'IP de Vercel
   • Pour les sous-domaines (par ex. www.example.com) : crée un enregistrement CNAME pointant vers le domaine Vercel

Déploiements et previews automatiques

L'une des plus grandes forces de Vercel est le système de déploiement automatique :

1. Déploiements de production automatiques

   • Chaque push sur la branche principale (par ex. main) déclenche un déploiement automatique

2. Preview Deployments

   • Chaque pull request crée automatiquement un environnement de preview unique
   • Cela permet de tester les changements avant de les merger dans la branche principale

1// Exemple de configuration Next.js optimisée pour Vercel
2// next.config.js
3
4module.exports = {
5  // Optimisation des images - automatiquement gérée par Vercel Image Optimization
6  images: {
7    domains: ['example.com', 'images.unsplash.com'],
8  },
9
10  // Analytics Vercel intégré
11  vercelAnalytics: {
12    enabled: true,
13  },
14
15  // Paramètres d'internationalisation
16  i18n: {
17    locales: ['pl', 'en', 'de'],
18    defaultLocale: 'pl',
19  },
20};

Fonctionnalités avancées de Vercel

Vercel propose un ensemble de fonctionnalités avancées qui valent la peine d'être utilisées :

1. Edge Functions - exécuter du code près de l'utilisateur sur le réseau edge mondial de Vercel
2. Serverless Functions - conversion automatique des API Routes en fonctions serverless
3. Edge Middleware - exécuter le middleware en bordure de réseau
4. Edge Config - stocker la configuration en bordure avec une lecture ultra-rapide
5. Analytics - outils d'analytics intégrés
6. Speed Insights - monitoring des Core Web Vitals

Déployer sur Netlify

Netlify est une autre plateforme populaire qui offre un excellent support pour les applications Next.js, surtout depuis l'introduction de la fonctionnalité Netlify Next.js Runtime.

Préparer le projet pour Netlify

1. Crée le fichier de configuration netlify.toml dans le répertoire principal du projet :

1# netlify.toml
2[build]
3  command = "npm run build"
4  publish = ".next"
5
6[[plugins]]
7  package = "@netlify/plugin-nextjs"

2. Installe le plugin Next.js pour Netlify :

1npm install -D @netlify/plugin-nextjs
2# ou
3yarn add -D @netlify/plugin-nextjs

Étape par étape : déployer sur Netlify

1. Crée un compte sur Netlify

   • Va sur netlify.com et inscris-toi

2. Importe le projet

   • Clique sur "Add new site" > "Import an existing project"
   • Connecte-toi à ton fournisseur Git et sélectionne ton dépôt

3. Configuration du déploiement

   • Netlify devrait détecter automatiquement les paramètres du projet Next.js
   • Assure-toi que la commande de build est npm run build ou yarn build
   • Le répertoire de publication doit être défini sur .next

4. Configure les variables d'environnement

   • Va dans "Site settings" > "Build & deploy" > "Environment"
   • Ajoute toutes les variables d'environnement nécessaires

5. Déploiement

   • Clique sur "Deploy site"

Fonctionnalités spécifiques à Netlify

Netlify propose un ensemble de fonctionnalités uniques qui peuvent être utiles dans les projets Next.js :

1. Netlify Functions - l'équivalent des API Routes
2. Netlify Edge Functions - similaire au Middleware de Next.js, mais s'exécutant en bordure
3. Netlify Forms - gestion de formulaires intégrée sans avoir à créer d'endpoints API
4. Netlify Identity - service d'authentification des utilisateurs

1// Exemple d'utilisation de Netlify Functions avec Next.js
2// /netlify/functions/hello-world.js
3
4exports.handler = async function(event, context) {
5  return {
6    statusCode: 200,
7    body: JSON.stringify({ message: "Hello World" }),
8    headers: {
9      'Content-Type': 'application/json'
10    }
11  };
12};
13
14// Accès depuis l'application Next.js
15// pages/api-example.js
16import { useState, useEffect } from 'react';
17
18export default function ApiExample() {
19  const [data, setData] = useState(null);
20
21  useEffect(() => {
22    fetch('/.netlify/functions/hello-world')
23      .then(res => res.json())
24      .then(data => setData(data));
25  }, []);
26
27  return (
28    <div>
29      <h1>API Example</h1>
30      <pre>{JSON.stringify(data, null, 2)}</pre>
31    </div>
32  );
33}

Déployer sur AWS Amplify

AWS Amplify est un service d'Amazon qui offre aussi un bon support pour les applications Next.js, surtout si tu utilises déjà l'écosystème AWS.

Préparer le projet pour AWS Amplify

1. Crée le fichier amplify.yml dans le répertoire principal du projet :

1# amplify.yml
2version: 1
3frontend:
4  phases:
5    preBuild:
6      commands:
7        - npm ci
8    build:
9      commands:
10        - npm run build
11  artifacts:
12    baseDirectory: .next
13    files:
14      - '**/*'
15  cache:
16    paths:
17      - node_modules/**/*

Étape par étape : déployer sur AWS Amplify

1. Crée un compte AWS ou connecte-toi à un compte existant

2. Va dans la console AWS Amplify

   • Choisis "Host web app"

3. Connecte le dépôt

   • Sélectionne un fournisseur de dépôt (GitHub, GitLab, BitBucket ou un dépôt AWS CodeCommit)
   • Connecte-toi et sélectionne ton dépôt

4. Configuration des paramètres de build

   • Amplify devrait détecter automatiquement le framework Next.js
   • Tu peux ajuster ou confirmer les paramètres de build

5. Configure les variables d'environnement

   • Ajoute toutes les variables d'environnement nécessaires dans la section "Environment variables"

6. Déploiement

   • Clique sur "Save and deploy"

Intégration avec les services AWS

L'une des principales forces d'AWS Amplify est l'intégration facile avec d'autres services AWS :

1// Exemple : intégration avec AWS Lambda et DynamoDB
2// pages/api/users.js
3
4import { DynamoDB } from 'aws-sdk';
5
6const dynamoDB = new DynamoDB.DocumentClient();
7
8export default async function handler(req, res) {
9  if (req.method === 'GET') {
10    const params = {
11      TableName: process.env.DYNAMODB_TABLE_NAME,
12    };
13
14    try {
15      const data = await dynamoDB.scan(params).promise();
16      res.status(200).json(data.Items);
17    } catch (error) {
18      res.status(500).json({ error: 'Failed to fetch users' });
19    }
20  }
21}

Déployer sur Digital Ocean App Platform

Digital Ocean App Platform est une autre option d'hébergement qui offre un bon support pour les applications Next.js.

Étape par étape : déployer sur Digital Ocean

1. Crée un compte Digital Ocean ou connecte-toi à un compte existant

2. Va sur Digital Ocean App Platform

   • Clique sur "Create App"

3. Sélectionne la source du code

   • Connecte ton dépôt GitHub, GitLab, ou choisis une autre source

4. Configuration de l'application

   • Sélectionne la branche à déployer
   • Choisis le type d'application "Web Service"
   • Dans les paramètres de build, sélectionne "Next.js" comme application exemple

5. Ajuste les paramètres

   • Définis la commande de build sur npm run build ou yarn build
   • Définis la commande de lancement sur npm start ou yarn start

6. Finalisation

   • Choisis un plan tarifaire
   • Clique sur "Launch App"

Autres options d'hébergement pour Next.js

GitHub Pages avec GitHub Actions

Pour les applications Next.js générées statiquement, tu peux utiliser GitHub Pages avec GitHub Actions :

1. Crée un fichier de workflow GitHub Actions :

1# .github/workflows/deploy.yml
2name: Deploy to GitHub Pages
3
4on:
5  push:
6    branches: [ main ]
7
8jobs:
9  build:
10    runs-on: ubuntu-latest
11    steps:
12      - uses: actions/checkout@v2
13      - uses: actions/setup-node@v2
14        with:
15          node-version: '18'
16      - name: Install dependencies
17        run: npm ci
18      - name: Build and export
19        run: npm run build && npm run export
20      - name: Deploy
21        uses: peaceiris/actions-gh-pages@v3
22        with:
23          github_token: ${{ secrets.GITHUB_TOKEN }}
24          publish_dir: ./out

2. Ajuste next.config.js :

1// next.config.js
2module.exports = {
3  output: 'export',
4  basePath: '/nom-du-depot', // Si la page n'est pas sur le domaine principal
5  images: {
6    unoptimized: true, // Pour GitHub Pages
7  },
8};

3. Ajoute un script à package.json :

1{
2  "scripts": {
3    "export": "next export"
4  }
5}

Firebase Hosting

Firebase Hosting est une autre option, surtout si tu utilises d'autres services Firebase :

1. Installe Firebase CLI :

1npm install -g firebase-tools

2. Initialise le projet Firebase :

1firebase login
2firebase init hosting

3. Configure le fichier firebase.json :

1{
2  "hosting": {
3    "public": "out",
4    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
5    "rewrites": [
6      {
7        "source": "**",
8        "destination": "/index.html"
9      }
10    ]
11  }
12}

4. Builde et déploie l'application :

1npm run build
2npm run export
3firebase deploy

Auto-hébergement sur ton propre serveur

Si tu préfères héberger l'application sur ton propre serveur :

Serveur Node.js

1. Prépare le script start dans package.json :

1{
2  "scripts": {
3    "start": "next start -p $PORT"
4  }
5}

2. Utilise PM2 pour gérer le processus :

1npm install -g pm2
2pm2 start npm --name "next-app" -- start

3. Configuration de Nginx comme reverse proxy :

1server {
2  listen 80;
3  server_name twojapage.pl www.twojapage.pl;
4
5  location / {
6    proxy_pass http://localhost:3000;
7    proxy_http_version 1.1;
8    proxy_set_header Upgrade $http_upgrade;
9    proxy_set_header Connection 'upgrade';
10    proxy_set_header Host $host;
11    proxy_cache_bypass $http_upgrade;
12  }
13}

Conteneurisation avec Docker

1. Crée un Dockerfile :

1# Dockerfile
2FROM node:18-alpine AS base
3
4# Étape d'installation des dépendances
5FROM base AS deps
6WORKDIR /app
7COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
8RUN \
9  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
10  elif [ -f package-lock.json ]; then npm ci; \
11  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
12  else echo "Pas de fichier lockfile" && exit 1; \
13  fi
14
15# Étape de build
16FROM base AS builder
17WORKDIR /app
18COPY --from=deps /app/node_modules ./node_modules
19COPY . .
20RUN npm run build
21
22# Étape de production
23FROM base AS runner
24WORKDIR /app
25ENV NODE_ENV production
26
27RUN addgroup --system --gid 1001 nodejs
28RUN adduser --system --uid 1001 nextjs
29
30COPY --from=builder /app/public ./public
31COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
32COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
33
34USER nextjs
35EXPOSE 3000
36ENV PORT 3000
37
38CMD ["node", "server.js"]

2. Configure next.config.js :

1// next.config.js
2module.exports = {
3  output: 'standalone',
4};

3. Builde et lance le conteneur :

1docker build -t next-app .
2docker run -p 3000:3000 next-app

Bonnes pratiques

Variables d'environnement

Gère les variables d'environnement selon les bonnes pratiques de Next.js :

1. Distingue les variables client et serveur :

   • Les variables qui doivent être disponibles dans le navigateur doivent avoir le préfixe NEXT_PUBLIC_
   • Les autres variables ne sont disponibles que dans le code serveur

2. Fichiers d'environnement :

   • .env.local - variables de l'environnement local, non committées dans le dépôt
   • .env.development - variables pour l'environnement de développement
   • .env.production - variables pour l'environnement de production
   • .env.test - variables pour l'environnement de test

Optimisation du déploiement

1. Cache et CDN :

   • Configure des en-têtes de cache appropriés pour les ressources statiques
   • Utilise un CDN pour accélérer la livraison des ressources statiques

2. Compression :

   • Active la compression Gzip ou Brotli sur le serveur

3. Core Web Vitals :

   • Surveille les métriques Web Vitals après le déploiement
   • Utilise des outils comme Lighthouse ou PageSpeed Insights

1// next.config.js - optimisation pour la production
2module.exports = {
3  // Compression
4  compress: true,
5
6  // Optimisation des images
7  images: {
8    domains: ['images.example.com'],
9    formats: ['image/avif', 'image/webp'],
10  },
11
12  // Générateur statique - performance maximale pour les pages ISR/SSG
13  staticPageGenerationTimeout: 120,
14
15  // Optimisation pour la production
16  productionBrowserSourceMaps: false, // Désactive les source maps en production
17
18  // Configuration webpack
19  webpack: (config, { dev, isServer }) => {
20    // Optimisations webpack...
21    return config;
22  },
23};

Automatiser le déploiement

Envisage d'implémenter le Continuous Deployment (CD) pour automatiser le processus de déploiement :

1# GitHub Actions - deploy.yml
2name: Deploy
3
4on:
5  push:
6    branches: [ main ]
7
8jobs:
9  deploy:
10    runs-on: ubuntu-latest
11    steps:
12      - uses: actions/checkout@v2
13
14      - name: Setup Node.js
15        uses: actions/setup-node@v2
16        with:
17          node-version: '18'
18
19      - name: Install dependencies
20        run: npm ci
21
22      - name: Run tests
23        run: npm test
24
25      - name: Build project
26        run: npm run build
27
28      - name: Deploy to production
29        uses: amondnet/vercel-action@v20
30        with:
31          vercel-token: ${{ secrets.VERCEL_TOKEN }}
32          vercel-org-id: ${{ secrets.ORG_ID }}
33          vercel-project-id: ${{ secrets.PROJECT_ID }}
34          vercel-args: '--prod'

Résumé

Le déploiement d'une application Next.js peut se faire de nombreuses façons, selon les besoins du projet et les préférences de l'équipe :

1. Vercel - le meilleur support natif, optimisé pour Next.js
2. Netlify - un concurrent solide avec un bon support de Next.js et des fonctionnalités supplémentaires
3. AWS Amplify - un bon choix pour les utilisateurs de l'écosystème AWS
4. Digital Ocean App Platform - une plateforme PaaS simple avec un bon support de Next.js
5. Auto-hébergement - la possibilité d'avoir un contrôle total sur l'infrastructure

Le choix de la plateforme d'hébergement doit être adapté à :

• Les spécificités du projet et ses exigences techniques
• Le budget et les coûts attendus
• L'expérience de l'équipe avec la plateforme donnée
• Les besoins liés à la scalabilité et aux performances
• Les services et intégrations supplémentaires qui peuvent être nécessaires

Quelle que soit la plateforme choisie, il vaut la peine de suivre les bonnes pratiques de gestion des environnements, des variables d'environnement, de la sécurité et de l'automatisation du déploiement.

1import React, { useState } from 'react';
2
3// Demo : Déploiement sur Vercel, Netlify et d'autres plateformes
4interface Platform {
5  id: string;
6  name: string;
7  icon: string;
8  color: string;
9  features: string[];
10  pricing: string;
11  deployCommand: string;
12  envSetup: string;
13  pros: string[];
14  cons: string[];
15}
16
17const platforms: Platform[] = [
18  {
19    id: 'vercel', name: 'Vercel', icon: 'V', color: '#000',
20    features: ['Edge Functions', 'ISR', 'Analytics', 'Preview Deploys', 'Serverless'],
21    pricing: 'Free tier / $20/mo Pro',
22    deployCommand: 'vercel deploy --prod',
23    envSetup: 'vercel env add DATABASE_URL\nvercel env add NEXTAUTH_SECRET',
24    pros: ['Native Next.js support', 'Automatic CI/CD', 'Edge Network', 'Preview on every PR'],
25    cons: ['Vendor lock-in', 'Costs at scale', 'Serverless limits'],
26  },
27  {
28    id: 'netlify', name: 'Netlify', icon: 'N', color: '#00ad9f',
29    features: ['Edge Functions', 'Forms', 'Identity', 'Split Testing', 'Plugins'],
30    pricing: 'Free tier / $19/mo Pro',
31    deployCommand: 'netlify deploy --prod',
32    envSetup: 'netlify env:set DATABASE_URL "value"\nnetlify env:set NEXTAUTH_SECRET "value"',
33    pros: ['Easy configuration', 'Built-in forms', 'Split testing', 'Plugin ecosystem'],
34    cons: ['Slower SSR', 'Limited Next.js features', 'Build limits'],
35  },
36  {
37    id: 'docker', name: 'Docker / VPS', icon: 'D', color: '#2496ed',
38    features: ['Full control', 'Custom runtime', 'Scaling', 'No limits'],
39    pricing: 'VPS à partir de $5/mo',
40    deployCommand: 'docker build -t myapp .\ndocker run -p 3000:3000 myapp',
41    envSetup: '# .env.production\nDATABASE_URL=postgresql://...\nNEXTAUTH_SECRET=...',
42    pros: ['Full control', 'No vendor lock-in', 'Lower costs at scale', 'Custom configuration'],
43    cons: ['More work', 'DevOps knowledge required', 'No auto-scaling', 'Self-managed monitoring'],
44  },
45  {
46    id: 'aws', name: 'AWS Amplify', icon: 'A', color: '#ff9900',
47    features: ['CloudFront CDN', 'Lambda@Edge', 'DynamoDB', 'S3', 'CI/CD'],
48    pricing: 'Pay-as-you-go',
49    deployCommand: 'amplify push\namplify publish',
50    envSetup: 'amplify add env staging\n# Configure in Amplify Console',
51    pros: ['AWS ecosystem', 'Scaling', 'Multiple regions', 'Integration with other AWS services'],
52    cons: ['Complexité', 'Courbe d\'apprentissage', 'Coûts difficiles à prévoir'],
53  },
54];
55
56type DeployStep = 'idle' | 'building' | 'testing' | 'deploying' | 'done';
57
58function DeploymentDemo() {
59  const [selectedPlatform, setSelectedPlatform] = useState<Platform>(platforms[0]);
60  const [deployStep, setDeployStep] = useState<DeployStep>('idle');
61  const [showComparison, setShowComparison] = useState(false);
62
63  const simulateDeploy = async () => {
64    setDeployStep('building');
65    await new Promise(r => setTimeout(r, 1500));
66    setDeployStep('testing');
67    await new Promise(r => setTimeout(r, 1000));
68    setDeployStep('deploying');
69    await new Promise(r => setTimeout(r, 2000));
70    setDeployStep('done');
71  };
72
73  const stepLabels: Record<DeployStep, string> = {
74    idle: 'Prêt pour le déploiement',
75    building: 'Build de l\'application...',
76    testing: 'Lancement des tests...',
77    deploying: 'Déploiement sur ' + selectedPlatform.name + '...',
78    done: 'Déployé avec succès !',
79  };
80
81  const stepColors: Record<DeployStep, string> = {
82    idle: '#8892b0', building: '#f59e0b', testing: '#3b82f6', deploying: '#8b5cf6', done: '#10b981',
83  };
84
85  return (
86    <div style={{ background: '#0f0f23', minHeight: '100vh', padding: '20px', color: '#e0e0e0', fontFamily: 'system-ui' }}>
87      <h1 style={{ color: '#64ffda', marginBottom: '8px' }}>Deployment Platforms</h1>
88      <p style={{ color: '#8892b0', marginBottom: '24px' }}>Déploiement d'applications Next.js sur différentes plateformes</p>
89
90      <div style={{ display: 'flex', gap: '12px', marginBottom: '24px', flexWrap: 'wrap' }}>
91        {platforms.map(p => (
92          <button key={p.id} onClick={() => { setSelectedPlatform(p); setDeployStep('idle'); }} style={{
93            padding: '14px 20px', borderRadius: '12px', cursor: 'pointer', border: '2px solid',
94            borderColor: selectedPlatform.id === p.id ? '#64ffda' : '#333',
95            background: selectedPlatform.id === p.id ? '#1a2a3e' : '#1a1a2e', color: '#fff',
96          }}>
97            <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#64ffda' }}>{p.icon}</div>
98            <div style={{ fontSize: '14px' }}>{p.name}</div>
99          </button>
100        ))}
101        <button onClick={() => setShowComparison(!showComparison)} style={{ padding: '14px 20px', borderRadius: '12px', background: showComparison ? '#7c3aed' : '#1a1a2e', color: '#fff', border: '1px solid #333', cursor: 'pointer', marginLeft: 'auto' }}>
102          Comparer
103        </button>
104      </div>
105
106      {!showComparison ? (
107        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
108          <div>
109            <div style={{ background: '#1a1a2e', padding: '20px', borderRadius: '12px', border: '1px solid #333', marginBottom: '16px' }}>
110              <h3 style={{ color: '#64ffda', marginTop: 0 }}>{selectedPlatform.name}</h3>
111              <p style={{ color: '#8892b0', fontSize: '13px' }}>Pricing: {selectedPlatform.pricing}</p>
112              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', marginBottom: '12px' }}>
113                {selectedPlatform.features.map(f => (
114                  <span key={f} style={{ fontSize: '11px', padding: '3px 8px', borderRadius: '4px', background: '#333', color: '#8892b0' }}>{f}</span>
115                ))}
116              </div>
117              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
118                <div>
119                  <strong style={{ color: '#10b981', fontSize: '13px' }}>Advantages:</strong>
120                  <ul style={{ fontSize: '12px', paddingLeft: '16px', color: '#8892b0', margin: '4px 0' }}>
121                    {selectedPlatform.pros.map((p, i) => <li key={i}>{p}</li>)}
122                  </ul>
123                </div>
124                <div>
125                  <strong style={{ color: '#ef4444', fontSize: '13px' }}>Inconvénients :</strong>
126                  <ul style={{ fontSize: '12px', paddingLeft: '16px', color: '#8892b0', margin: '4px 0' }}>
127                    {selectedPlatform.cons.map((c, i) => <li key={i}>{c}</li>)}
128                  </ul>
129                </div>
130              </div>
131            </div>
132
133            <div style={{ background: '#1a1a2e', padding: '16px', borderRadius: '8px', border: '1px solid #333' }}>
134              <strong style={{ color: '#f59e0b', fontSize: '13px' }}>Deploy command:</strong>
135              <pre style={{ fontSize: '12px', color: '#64ffda', margin: '8px 0 0', whiteSpace: 'pre-wrap' }}>{selectedPlatform.deployCommand}</pre>
136            </div>
137          </div>
138
139          <div>
140            <div style={{ background: '#1a1a2e', padding: '20px', borderRadius: '12px', border: '1px solid #333' }}>
141              <h3 style={{ color: '#64ffda', marginTop: 0, fontSize: '16px' }}>Simulation de déploiement</h3>
142              <div style={{ marginBottom: '16px', padding: '12px', borderRadius: '8px', background: stepColors[deployStep] + '20', border: '1px solid ' + stepColors[deployStep] }}>
143                <span style={{ color: stepColors[deployStep] }}>{stepLabels[deployStep]}</span>
144              </div>
145              <button onClick={simulateDeploy} disabled={deployStep !== 'idle' && deployStep !== 'done'} style={{ padding: '10px 20px', borderRadius: '8px', background: '#64ffda', color: '#0f0f23', border: 'none', cursor: 'pointer', fontWeight: 'bold' }}>
146                Deploy
147              </button>
148            </div>
149          </div>
150        </div>
151      ) : (
152        <div style={{ overflowX: 'auto' }}>
153          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '13px' }}>
154            <thead>
155              <tr>{['', ...platforms.map(p => p.name)].map((h, i) => <th key={i} style={{ padding: '10px', textAlign: 'left', borderBottom: '1px solid #333', color: '#64ffda' }}>{h}</th>)}</tr>
156            </thead>
157            <tbody>
158              {['pricing', 'features'].map(field => (
159                <tr key={field}>
160                  <td style={{ padding: '10px', borderBottom: '1px solid #222', color: '#8892b0' }}>{field}</td>
161                  {platforms.map(p => (
162                    <td key={p.id} style={{ padding: '10px', borderBottom: '1px solid #222', color: '#e0e0e0' }}>
163                      {field === 'pricing' ? p.pricing : p.features.slice(0, 3).join(', ')}
164                    </td>
165                  ))}
166                </tr>
167              ))}
168            </tbody>
169          </table>
170        </div>
171      )}
172    </div>
173  );
174}
175
176export default DeploymentDemo;