Monter un Next.js en production

Prérequis

Pour pouvoir mettre en production un site internet basé sur Next.js, il faut avoir un serveur cloud et pas simplement un hébergement qui ne permet pas de faire tourner le site internet comme un WordPress.

Marche à suivre

1. Se rendre dans l’hébergement

Une fois qu’on est dans le serveur cloud et dans le bon hébergement, on va pouvoir passer à l’étape suivante.

2. Créer un nouveau site

On va pouvoir venir cliquer sur « Ajouter un site »

Sélectionnez « Créez un projet vierge » et cliquez sur « Suivant »

On peut sélectionner « Apache/PHP » même si en théorie on devrait sélectionner Node.js, mais aux dernières nouvelles on ne peut créer qu’un seul site Next.js en sélectionnant Node.js, c’est pour cela qu’on utilise Apache/PHP mais on viendra y installer les dépendances nécessaires pour utiliser Node.js

On peut ensuite utiliser un nom de domaine ou autre. Ici on va utiliser un sous-domaine. On va rentrer les différentes informations nécessaires et choisir l’emplacement du projet.

Une fois cela fait, vous aurez le message comme quoi le site est en cours de création.

3. Une fois le site créé

Prérequis

Avant d’aller plus loin, il faudra installer quelques éléments différents.

En se rendant dans le serveur cloud, il faudra aller sous « Fast installer » et cliquer sur « Installer une application » on viendra installer « NVM ». Il nous faudra également HAProxy par la suite, mais il est normalement installé par défaut.

Se rendre dans le terminal

Une fois que vous avez des accès ftp/ssh pour votre hébergement. Vous allez pouvoir lancer un terminal. A titre personnel, j’utilise Bitvise SSH comme application.

On va venir installer la dernière version de Node.js avec NVM qu’on vient d’installer en utilisant cette commande, on peut se trouver n’importe où ça va l’installer globalement.

nvm install stable

Une fois l’installation terminée, le résultat attendu ressemble à cela + ou – :

« Now using node v24.2.0 (npm v11.30) » LTS v22.16.0″

On va continuer pour installer 2 éléments importants globalement également.
On peut taper les commandes suivantes :
npm install -g pm2

4. Aspects sécurité

Il ne faut pas oublier d’ouvrir les ports avant comme par exemple :

• 3306 pour les bases de données
• 1337 pour le backend ou autres
• 4002 ou 4003 ou autres pour le frontend selon celui qu’on choisit pour notre site

Typiquement, dans le HAProxy, on viendra sélectionner le domaine qui correspond à notre site pour que le reverse proxy fonctionne et qu’on puisse accéder au site internet avec le nom de domaine et pas seulement l’adresse IP publique.

ça ressemble à ça

Et aussi, ne pas oublier de faire correspondre ce port dans le .env et aussi dans le package.json si non lorsqu’on va démarrer l’app les ports ne correspondront pas et ça ne fonctionnera pas.

5. Créer le build du projet Next.js

Se rendre dans notre projet next.js, vérifiez que toutes les informations du .env correspondent à ce qui est attendu pour la mise en production.

Une fois que le projet est prêt, on va donc créer un build

npm run build

On peut ensuite se rendre dans le ftp pour transférer les fichiers sur notre serveur. Les fichiers à transférer sont les suivants :

• .next (contient le build)
• package.json
• package-lock.json
• public
• .env

Il faut se rendre dans le terminal sous le site pour installer les dépendances, donc on se rend dans le terminal :

cd sites
cd lesite.ch
npm install

Une fois tous les éléments suivants mis en place, on va pouvoir lancer le processus comme ceci :

pm2 start npm --name nom -- run start