Déploiement d'un projet Nextjs sur un VPS: guide complet

Déploiement d'un projet Nextjs sur un VPS: guide complet
Alexandre P. dans System - mis à jour le 12-05-2025

Apprenez à déployer un projet Next.js sur un VPS brut avec Node, Nginx et SSL, pour plus de performances et moins de frais qu’avec un service managé.

Mode d'emploi pour déployer soi-même un projet Next.js sur un VPS livré sans rien. Nature et performances garanties.

Trop de développeurs se reposent sur des plateformes clé en main, souvent chères et bridées. Vous payez parfois 4 fois plus pour un service qui tourne sur une infra partagée avec moins de performances.

Il est temps de reprendre le contrôle.

Présentation

Dans cet article, je vous montre comment déployer un projet Next.js sur un VPS brut, de zéro. On installe juste ce qu’il faut, rien de plus.

À la clé : performances, maîtrise et économies.

Voici les grandes étapes :

  • Installer les dépendances système
  • Cloner et préparer le projet Next.js
  • Créer un service systemd pour un démarrage automatique
  • Configurer Nginx comme reverse proxy
  • Générer un certificat SSL avec Certbot

Installation des paquets essentiels

Prenons un exemple concret : un VPS quad-core chez Pulseheberg à 6€/mois avec Ubuntu 24.

On commence par mettre à jour et installer les outils de base :

sudo apt update
sudo apt install curl nginx
sudo apt install certbot python3-certbot-nginx

Installer Node.js avec NVM

On installe Node.js via nvm pour plus de flexibilité :

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

Puis, on active NVM :

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Ensuite, installez Node 24 :

nvm install 24

Et installez pnpm globalement :

npm i -g pnpm

Clonage du projet et installation des dépendances

Clonez votre dépôt dans /var/www :

cd /var/www
git clone https://<token>@github.com:<user>/<repo>.git project
cd project
pnpm i

N’oubliez pas de builder votre projet :

pnpm build

Et de créer le fichier .env si nécessaire :

nano .env

Création du service systemd

Créer un service permet de faire tourner votre app comme un process système qui redémarre automatiquement.

Ici, pour l'utilisateur, cela dépendra de votre machine, si vous êtes déjà root, vous utiliserez root à la fois en user et en groupe, si vous avez un user qui s'appelle ubuntu, je vous conseille de récupérer le group actuel de votre user en faisant:

id

Exemple de group: ubuntu ou docker (ça dépend de votre hébergeur)

Pour l'ExecStart,

  • En tant que root: /root/.nvm/versions/node/v24.0.1/bin/pnpm
  • En tant que ubuntu: /home/ubuntu/.nvm/versions/node/v24.0.1/bin/pnpm

On va lancer notre projet sur le port 8080.

Créez le fichier suivant :

sudo nano /etc/systemd/system/project.service

Et collez ce contenu en adaptant User, Group et le chemin vers votre exécutable pnpm :

[Unit]
Description=Project

[Service]
WorkingDirectory=/var/www/project
ExecStart=/<execstart conf voir plus haut>/.nvm/versions/node/v24.0.1/bin/pnpm start -p 8080
ExecReload=/bin/kill -s SIGUSR2 $MAINPID
Restart=always
User=<user>
Group=<group>
StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=Project
Environment=NODE_ENV=production

[Install]
WantedBy=multi-user.target

Rechargez les services et démarrez le vôtre :

sudo systemctl daemon-reload
sudo systemctl start project

Vous pouvez vérifier le statut de votre service en faisant:

sudo systemctl status project

Si le service est up, tout s'est bien passé, si non, n'hésitez pas à faire un tour dans les logs pour vérifier:

journalctl -xe

Une fois que votre service tourne sans soucis, nous allons activer la reprise automatique en cas de reboot en faisant:

sudo systemctl enable project

Configuration Nginx

Redirigez votre nom de domaine vers l’IP du VPS depuis votre hébergeur de domaine.

Ensuite, créez la conf Nginx :

sudo nano /etc/nginx/sites-available/project.conf

Contenu type (remplacez <domain> par votre domaine réel, exemple: project.fr) :

upstream nextapp {
    server 127.0.0.1:8080;
}

server {
    server_name <domain>;
    listen 443 ssl;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_pass http://nextapp;
        proxy_redirect off;
    }
}

server {
    server_name www.<domain>;
    listen 443 ssl;
    return 301 https://<domain>$request_uri;
}

server {
    server_name <domain> www.<domain>;
    listen 80;
    return 301 https://<domain>$request_uri;
}

Activez la config :

sudo ln -s /etc/nginx/sites-available/project.conf /etc/nginx/sites-enabled/project.conf
sudo systemctl restart nginx

A ce stade, si vous avez tout bien configurer, votre site marche déjà en HTTP mais sans certificat SSL, donc vous aurez un warning du navigateur si vous essayez d'y aller.

Activer le SSL avec Certbot

Lancez Certbot :

certbot --nginx

Au premier lancement, il vous demande de renseigner votre email afin de vous contacter en cas de besoin (fin de certificat, renouvellement, renseignements etc...).

Il va lister les sites que vous avez, vous devriez avoir votre nom de domaine dans la liste, renseignez le bon numéro et validez.

Maintenant, votre site devrait être fonctionnel avec https sur votre navigateur.

Conclusion

Vous venez de gérer un déploiement Next.js from scratch comme un vrai adminsys.

Un VPS optimisé, un projet Next.js auto-géré, un reverse proxy propre et du SSL aux petits oignons.

Pas besoin de Vercel ou autre service managé à 25€/mois pour servir une landing page.

#déploiement projet nextjs#configurer vps avec nextjs#déployer sur un vps#ubuntu linux

user picture

Alexandre P.

Développeur passionné depuis plus de 20 ans, j'ai une appétence particulière pour les défis techniques et changer de technologie ne me fait pas froid aux yeux.


Votre vie privée

Nous utilisons des cookies pour améliorer votre expérience sur notre site, analyser notre trafic et personnaliser les publicités. En cliquant sur "Accepter", vous consentez à l'utilisation de tous les cookies. Vous pouvez également choisir de refuser en cliquant sur le bouton "Refuser".