Comment déployer Next.js sur Saplo

Next.js est aujourd'hui le choix par défaut si tu construis un site ou une application en React qui doit se charger rapidement et apparaître en bonne position dans les résultats de recherche. Le rendu côté serveur et l'App Router font une différence qu'une application SPA classique, composée d'une simple build statique, ne peut pas offrir. Le problème est qu'une telle application nécessite un processus Node.js en arrière-plan, et pas seulement un répertoire avec des fichiers HTML, donc la déployer sur un hébergement mutualisé standard est généralement impossible. Sur Saplo, tu installes Next.js comme n'importe quelle autre application du catalogue, et Saplo le lance immédiatement en tant que service géré avec un redémarrage automatique. Ci-dessous, nous te montrons comment le faire de zéro, y compris la connexion à ton propre dépôt Git.

À qui s'adresse Next.js sur Saplo

Avant de commencer l'installation, vérifie si c'est le bon choix pour ton projet :

• Tu as ou tu construis un projet en Next.js avec App Router - Saplo détecte la structure du projet et lance next start en tant que service, tu n'as pas besoin d'écrire toi-même la configuration pm2 ou systemd.
• Tu as besoin de SSR ou ISR, pas seulement d'une version statique - Si ta page est entièrement statique, une pile React ou Astro du même Catalogue d'applications sera moins chère et plus légère.
• Tu veux des déploiements avec git push au lieu de transférer des fichiers manuellement - Tu branches le dépôt une fois, et chaque push vers la branche de production construit et déploie automatiquement une nouvelle version.
• Ta facture d'hébergement pour un projet actuellement sur Vercel ou Netlify augmente - Tu migres le code un à un, next.config.* reste inchangé, tu paies pour le Box au lieu de la consommation de fonctions.

Si ton projet est un pur frontend sans besoin de rendu côté serveur, consulte la pile React ou Astro dans le Catalogue d'applications, les deux sont plus légères et moins chères à maintenir.

Exigences

Pour installer Next.js sur Saplo, tu as besoin de :

• Un Box en plan L ou supérieur - Saplo recommande officiellement ce niveau pour Next.js, car le rendu côté serveur nécessite plus de RAM qu'un site statique ordinaire. Les plans inférieurs ne suffisent que pour un très faible trafic de test.
• Au minimum 512 Mo de RAM libre et 2 Go d'espace disque pour le processus de l'application.
• Un domaine ou sous-domaine *.saploapp.pl inclus dans le prix de chaque plan, sur lequel l'application sera hébergée.
• Un dépôt Git sur GitHub, GitLab ou Bitbucket si tu souhaites utiliser le déploiement automatique (facultatif au début, tu peux aussi télécharger l'application via une archive .zip depuis le Panneau).
• Généralement, tu n'as PAS besoin d'une base de données séparée, sauf si ton application se connecte elle-même à une base de données ; Saplo ne l'impose pas.

Installation étape par étape

1. Dans le Panneau Saplo, accède au Catalogue d'applications et sélectionne Next.js (catégorie "Frameworks").
2. Choisis une Box de plan L ou supérieur et le nom de l'application - cela créera un sous-domaine par défaut <name>.saploapp.pl. Tu peux ajouter ton propre Domaine maintenant ou plus tard.
3. Confirme l'installation. Le moteur provisionne le module sur la Box et lance le squelette de démarrage de Next.js (équivalent à create-next-app), pour que tu aies quelque chose à voir sur le Domaine avant de déployer ton propre code.
4. Saplo démarre l'application en tant que service géré avec un redémarrage automatique, et nginx sur la Box dirige le trafic du Domaine vers le port du processus Next.js.
5. Une fois l'installation terminée, le Domaine de l'étape 2 affiche une page d'accueil fonctionnelle. À partir de ce moment, tu peux y déployer ton propre projet.

Déploiement de votre propre code via Git

1. Dans les détails de l'application, trouve la section Git / CI-CD et clique sur "Connecter GitHub", confirme l'installation de l'application "Saplo Deploy" sur ton compte ou ton organisation et indique le dépôt avec le projet Next.js.
2. Le fichier saplo.yaml doit se trouver dans le répertoire racine du dépôt. Tu peux le générer avec la commande saplo init ou l'écrire manuellement (exemple ci-dessous).
3. Valide et pousse le fichier saplo.yaml vers la branche de production (par défaut main, tu peux la changer dans la section branches.production du même fichier).
4. Chaque git push ultérieur vers cette branche déclenche une construction et un déploiement automatiques, tu peux voir le statut dans le panneau sous l'onglet Déploiements et comme un marqueur vert ou rouge à côté du commit sur GitHub.
5. Si la construction ou le contrôle de santé échoue, la version précédente de l'application reste en place, Saplo ne la remplace pas par une version défectueuse.

Exemple de fichier saplo.yaml minimal pour Next.js :

name: my-project
stack: nextjs
runtime:
  node: "22"
build:
  install: npm ci
  command: npm run build
start:
  command: npm start
  port: 3000

Le push de ce fichier ressemble à n'importe quel autre commit :

git add saplo.yaml
git commit -m "add saplo.yaml"
git push origin main

Next.js sur Saplo vs les alternatives

Questions fréquentes

Dois-je connecter Git tout de suite, ou puis-je commencer sans ? Tu peux commencer sans Git. L'installation depuis le Catalogue d'applications déploie un squelette Next.js fonctionnel, et tu peux effectuer le premier déploiement de ton propre code en téléchargeant une archive .zip dans le Panneau. Tu connecteras Git à tout moment plus tard.

Pourquoi le plan Box L est-il recommandé et non un plan inférieur ? Parce que le rendu côté serveur (SSR) maintient le processus Node.js constamment en mémoire et répond à chaque requête à nouveau, contrairement à une page statique, qui une fois construite, reste sur le disque. Les plans inférieurs sont suffisants pour les tests, mais sous un trafic de production réel, ils manqueront de RAM.

Que se passe-t-il si le fichier saplo.yaml n'est pas présent dans le dépôt ? Lors du premier déploiement sans ce fichier, le déploiement échouera. Lors des déploiements ultérieurs, si le fichier disparaît d'un commit spécifique, Saplo utilisera la configuration du dernier déploiement réussi.

Dois-je configurer le port de l'application manuellement ? Tu n'as pas à le faire, le port par défaut est 3000 et la plupart des projets Next.js n'exigent pas de le modifier. Si ton application le modifie, configure-le dans la section start.port du fichier saplo.yaml.

Puis-je avoir plusieurs applications Next.js côte à côte sur une seule Box ? Oui, le Catalogue d'applications permet de déployer plusieurs modules sur une seule Box, chacun avec son propre sous-domaine ou Domaine, tant qu'il y a suffisamment de RAM et d'espace disque alloués au plan.

Tu peux installer Next.js sur Saplo, du début à un Domaine fonctionnel, en quelques minutes. Chaque git push suivant déploie une nouvelle version sans ton intervention. Si tu migres un projet existant de Vercel ou Netlify et que quelque chose ne fonctionne pas comme il le devrait, écris-nous, nous t'aiderons à choisir la configuration dans saplo.yaml.