🚀 Déploiement d’une application Next.js 13+ sur Vercel, OVH et autres plateformes

Une fois votre projet Next.jsNext.js
Framework React créé par Vercel, offrant SSR, SSG, routage et optimisations intégrées. prêt, il est temps de le mettre en ligne ! Voici comment déployer votre application sur Vercel, OVH, et d’autres solutions d’hébergement.

1️⃣ Déploiement sur Vercel (Recommandé 🚀)

Vercel est la plateforme officielle de Next.js, offrant un déploiement simple et optimisé.

🔹 Étape 1 : Installer Vercel CLI

Assurez-vous d’avoir Vercel CLI  installé :

npm install -g vercel

🔹 Étape 2 : Se connecter à Vercel

Dans le terminal, exécutez :

vercel login

Suivez les instructions pour vous authentifier avec GitHub, GitLab ou Email.

🔹 Étape 3 : Déployer le projet

Dans le dossier du projet Next.js, lancez :

vercel

Vercel détecte automatiquement le projet et vous pose quelques questions :

• Nom du projet
• Lien avec un dépôt GitGit
  Système de contrôle de version distribué pour suivre les modifications du code source.
• Configuration de l’environnement (.env.local)

🔹 Étape 4 : Configuration des variables d’environnement

Si votre projet utilise des variables d’environnement (.env.local), configurez-les sur Vercel :

vercel env add VARIABLE_NAME "valeur"

Ou via l’interface web de Vercel : Settings → Environment Variables.

✅ Avantages de Vercel :

• Déploiement automatique depuis GitHub.
• Optimisé pour Next.js (SSRSSR
  Server-Side Rendering – rendu de la page côté serveur avant envoi au navigateur., ISR, etc.).
• Domaines gratuits en .vercel.app.

2️⃣ Déploiement sur OVH (VPS ou Hébergement Web mutualisé)

Si vous préférez OVH, plusieurs options sont possibles :

• Hébergement mutualisé (non recommandé pour Next.js)
• VPS (Virtual Private Server, plus flexible)
• Bare Metal (serveur dédié)

🔹 Solution 1 : OVH Hébergement mutualisé (via Node.js en mode Static Export)

Les hébergements OVH mutualisés ne supportent pas SSR (Server-Side Rendering). Vous devez générer un site statique :

npm run build
npm run export

Ensuite, transférez le contenu du dossier out/ via FTP ou SFTP sur OVH.
Mais ⚠️ : Pas de SSR, pas d’APIAPI
Application Programming Interface – interface permettant à deux applications de communiquer entre elles. routes, uniquement du statique !

🔹 Solution 2 : OVH VPS (Recommandé pour SSR et API routes)

Sur un VPS OVH, vous pouvez déployer une instance complète de Next.js.

📌 Étape 1 : Choisir un VPS

📌 Prérequis : Un serveur avec Ubuntu 22.04 et Node.jsNode.js
Environnement d'exécution JavaScript côté serveur, basé sur le moteur V8 de Chrome. installé.
Si Node.js n’est pas installé :

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

📌 Étape 2 : Déployer le projet sur le VPS

Connectez-vous au serveur via SSH :

ssh user@votre-ip-ovh

Clonez le projet depuis GitHub ou transférez les fichiers avec scp ou rsync.

📌 Étape 3 : Installer les dépendances et construire le projet

cd mon-projet
npm install
npm run build

📌 Étape 4 : Exécuter Next.js avec PM2

Pour garantir que Next.js tourne en arrière-plan, utilisez PM2 :

npm install -g pm2
pm2 start "npm run start" --name "nextjs-app"
pm2 save
pm2 startup

L’application tourne sur le port 3000 ! 🎉
Pour un accès via un domaine, configurez un reverse proxy Nginx.

3️⃣ Déploiement sur un serveur dédié / autre plateforme (DigitalOcean, AWS, etc.)

Si vous utilisez un serveur dédié ou une autre plateforme (DigitalOcean, AWS, Render…), voici les étapes générales :

🔹 Étape 1 : Installer Node.js et Next.js

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

🔹 Étape 2 : Installer et lancer l’application

git clone https://github.com/user/mon-projet.git
cd mon-projet
npm install
npm run build
npm start

🔹 Étape 3 : Configurer un reverse proxy avec Nginx

Si votre serveur a un domaine, configurez Nginx :

server {
  server_name mon-site.com;
 
  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

Activez le site et redémarrez Nginx :

sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/
sudo systemctl restart nginx

🚀 Votre site est maintenant en ligne avec un domaine ! 🎉

🎯 Conclusion

📌 Quelle solution choisir ?

✅ Vercel est idéal pour la plupart des projets Next.js.
✅ OVH VPS ou DigitalOcean offrent plus de flexibilité si vous avez besoin de personnalisation.

📌 Prochaine étape ? Ajouter un nom de domaine et un SSL pour sécuriser votre application ! 🔥