Next.js est un framework populaire pour la création d'applications React rendues par un serveur. Une option pratique pour héberger des applications Next.js est Vercel, une plate-forme qui offre un déploiement facile pour les applications Next.js. Cependant, il existe certaines situations où l'hébergement d'une application Next.js sur un serveur privé virtuel (VPS) peut être un meilleur choix.

Voici quelques raisons potentielles d'envisager d'héberger une application Next.js sur un VPS au lieu de Vercel :

1. Personnalisation : Avec un VPS, vous avez un contrôle total sur le système d'exploitation et la pile logicielle. Cela vous permet de personnaliser votre configuration pour répondre aux besoins spécifiques de votre application. En revanche, Vercel propose un ensemble limité d'options pour personnaliser votre environnement.

2. Performances : les VPS offrent des ressources dédiées, ce qui peut entraîner une amélioration des performances par rapport aux plates-formes qui partagent des ressources entre plusieurs utilisateurs. Si les performances sont un facteur critique pour votre application Next.js, un VPS peut être un bon choix.

3. Coût : Bien que Vercel propose un plan gratuit pour les petits projets, l'hébergement d'une application Next.js sur un VPS peut potentiellement être plus rentable à long terme, en particulier pour les applications plus importantes. Avec un VPS, vous ne payez que pour les ressources que vous utilisez, alors que Vercel facture en fonction du nombre de requêtes et de minutes de construction.

4. Confidentialité : Si vous avez des données sensibles ou si vous voulez simplement plus de contrôle sur l'endroit où vos données sont stockées, l'hébergement d'une application Next.js sur un VPS peut être un meilleur choix. Avec un VPS, vous avez un contrôle total sur l'endroit où vos données sont stockées et qui y a accès.

Bien sûr, l'hébergement d'une application Next.js sur un VPS présente également des inconvénients potentiels. La configuration et la maintenance d'un VPS peuvent nécessiter plus de temps et d'expertise technique, et vous serez responsable de la gestion des mises à jour et des correctifs de sécurité.

Si vous décidez d'héberger une application Next.js sur un VPS, voici un exemple de configuration :

1.Achetez un VPS auprès d'un fournisseur

Pour acheter un VPS, vous pouvez choisir une plateforme telle que DigitalOcean ou Hostinger.

2.Connectez-vous à votre VPS en utilisant SSH.

Pour vous connecter à votre VPS (Virtual Private Server) en utilisant SSH (Secure Shell), vous devrez utiliser un programme de terminal. De nombreuses options sont disponibles pour cela, telles que Terminal sur macOS ou Linux, ou PuTTY sur Windows.

Voici un exemple de la façon dont vous pouvez vous connecter à votre VPS en utilisant Terminal sur macOS ou Linux :

ssh username@your_server_ip_or_hostname

Cette commande ouvrira une connexion SSH au VPS en utilisant le nom d'utilisateur et l'adresse IP ou le nom d'hôte spécifiés. Vous serez invité à entrer votre mot de passe pour le VPS.

Si vous utilisez PuTTY sous Windows, vous devrez saisir l'adresse IP ou le nom d'hôte de votre VPS dans le champ "Nom d'hôte (ou adresse IP)", puis cliquer sur le bouton "Ouvrir" pour ouvrir la connexion SSH. Vous serez ensuite invité à entrer votre nom d'utilisateur et votre mot de passe pour le VPS.

Une fois connecté au VPS via SSH, vous pourrez exécuter des commandes sur le serveur comme si vous y étiez physiquement connecté. Cela peut être utile pour des tâches telles que la gestion de fichiers, l'installation de logiciels et l'exécution de scripts sur le serveur.

3. Installez Node.js et Git sur votre VPS

Pour installer Node.js et Git sur votre VPS, suivez ces étapes :

1. Mettez à jour le gestionnaire de packages :

 sudo apt-get update

Cela récupère les dernières informations sur les packages à partir des référentiels distants et met à jour la liste des packages locaux.

2. Installez Node.js :

sudo apt-get install nodejs

Ceci installe la dernière version stable de Node.js à partir des référentiels du gestionnaire de packages.

3. Installez Git :

Ceci installe Git, qui est un système de contrôle de version utilisé pour suivre les modifications du code source.

4. Vérifiez l'installation :

 node -v
 git --version

Ces commandes imprimeront respectivement la version installée de Node.js et Git. Si l'installation a réussi, vous devriez voir le numéro de version imprimé sur le terminal.

4. Clonez votre applications Next.js sur votre VPS

Pour cloner votre référentiel d'applications Next.js sur votre VPS, vous devrez utiliser la commande git clone. Cette commande prend une URL de référentiel comme argument et crée une copie locale du référentiel sur votre VPS.

git clone https://github.com/pseudo/mon-app.git

Ceci créera un nouveau répertoire appelé mon-app dans le répertoire de travail actuel et y clonera les fichiers du référentiel. Si vous souhaitez cloner le référentiel dans un autre répertoire, vous pouvez spécifier le chemin du répertoire souhaité comme argument supplémentaire :

git clone https://github.com/pseudo/mon-app.git /path/to/destination

5. Installer les packages à l'aide de npm ou de yarn

Pour installer des packages pour un projet Node.js à l'aide de npm (le gestionnaire de packages Node.js), vous pouvez utiliser la commande npm install ou yarn. Ces commandes lisent les packages répertoriées dans le fichier package.json du projet et les installent dans le répertoire node_modules.

Par exemple, pour installer tous les packages d'un projet, vous pouvez exécuter les commande suivante dans le répertoire racine du projet :

#pour utiliser npn
npm install
    
#pour utiliser yarn
yarn

Vous pouvez également utiliser la commande yarn add ou la commande npm install pour installer un package spécifique. Par exemple, pour installer le package next, vous pouvez exécuter la commande suivante :

yarn add next
#ou
npm install next

6. Buildez votre application Next.js.

Pour faire un build de votre application Next.js, vous pouvez utiliser la commande suivante :

next build

Cette commande générera l'application pour la production et créera un répertoire .next à la racine de votre projet, qui contient la version de production optimisée de votre application.

7. Configurez un gestionnaire de processus

Pour configurer un gestionnaire de processus tel que PM2 afin de garantir que votre application Next.js continue de s'exécuter en cas d'erreur ou de redémarrage, vous pouvez suivre les étapes suivantes :

Installez PM2 en exécutant la commande suivante :

npm install -g pm2

Accédez à la racine de votre application Next.js et créez un fichier de configuration pour PM2. Ce fichier spécifiera la commande que PM2 doit utiliser pour démarrer votre application. Par exemple, vous pouvez créer un fichier nommé ecosystem.config.js avec le contenu suivant :

module.exports = {
  apps: [{
    name: 'mon-app',
    script: 'npm',
    args: 'start',
  }],
};

Démarrez votre application à l'aide de PM2 en exécutant la commande suivante :

pm2 start ecosystem.config.js

Ceci démarrera votre application Next.js et la maintiendra en arrière-plan. Si l'application se bloque ou est redémarrée pour une raison quelconque, PM2 la redémarrera automatiquement pour vous.

Pour en savoir plus sur PM2 ici.

8. Configurez un nom de domaine et votre VPS.

Pour configurer un nom de domaine et configurer votre serveur privé virtuel (VPS) pour servir une application Next.js sur votre domaine, vous pouvez suivre ces étapes :

1. Achetez un nom de domaine auprès d'un registraire de domaine tel que GoDaddy ou Namecheap.

2. Configurez les paramètres DNS du domaine pour pointer vers votre VPS. Cela implique généralement la création d'un « enregistrement A » qui associe votre nom de domaine à l'adresse IP de votre VPS. Les étapes exactes pour ce faire dépendront de votre registraire de domaine et de votre fournisseur d'hébergement.

3. Installez nginx sur votre VPS en exécutant la commande suivante :

sudo apt-get install nginx

4. Créez un fichier de configuration pour votre domaine dans le répertoire sites-available de nginx. Par exemple, vous pouvez créer un fichier nommé mon-app.conf avec le contenu suivant :

server {
  listen 80;
  listen [::]:80;
  server_name mon-app.com www.mon-app.com;
  root /var/www/mon-app/public;
  index index.html index.htm index.nginx-debian.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

Ce fichier de configuration indique à nginx d'écouter le trafic sur le port 80 et de servir le contenu du répertoire /var/www/my-app/public lorsque quelqu'un visite mon-app.com ou www.mon-app.com.

5. Activez le fichier de configuration en créant un lien symbolique vers celui-ci dans le répertoire sites-enabled de nginx :

sudo ln -s /etc/nginx/sites-available/mon-app.conf /etc/nginx/sites-enabled/

6. Testez votre configuration nginx en exécutant la commande suivante :

sudo nginx-t

Si la configuration est valide, vous devriez voir un message semblable à ceci :

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

7. Si la configuration est valide, redémarrez nginx pour appliquer les modifications :

sudo systemctl restart nginx

Votre application Next.js devrait maintenant être accessible à votre nom de domaine. Vous devrez peut-être attendre quelques minutes pour que les modifications DNS se propagent avant que l'application ne soit accessible.

8.Installez et configurez certbot et nginx pour sécuriser votre application Next.js :

Installer certbot

sudo apt-get install certbot

Obtenez un certificat SSL pour votre domaine à l'aide de certbot. Vous pouvez utiliser la commande certbot pour obtenir un certificat et le faire installer et configurer automatiquement pour nginx. Par exemple, vous pouvez exécuter la commande suivante :

sudo certbot --nginx -d mon-app.com -d www.mon-app.com

Ceci obtiendra un certificat SSL pour mon-app.com et www.mon-app.com et configurera nginx pour utiliser le certificat.



Voilà un exemple de comment vous pouvez configurer une application Next.js sur un VPS. Il existe de nombreuses autres façons de le faire, et les détails dépendront de vos besoins et de vos préférences.

En conclusion, bien que Vercel soit une option pratique pour héberger des applications Next.js, il existe des situations où l'hébergement sur un VPS pourrait être un meilleur choix. L'utilisation d'un VPS ou d'une plateforme comme Vercel dépendra de vos besoins et priorités spécifiques.