Héberger Next.js sur votre propre serveur avec déploiement à chaque git push

La façon courte d'héberger Next.js sur votre propre serveur : installer un panneau de déploiement comme Coolify et connecter votre dépôt GitHub. Ensuite, chaque git push compile l'application et met la nouvelle version en ligne en HTTPS. D'après la documentation de Next.js, toutes les fonctionnalités marchent quand vous déployez avec un serveur Node.js ou un conteneur Docker : vous n'êtes donc lié à aucune plateforme particulière.

Quelles fonctionnalités marchent sur votre propre serveur ?

Le tableau de la documentation officielle est court : un serveur Node.js et Docker prennent en charge toutes les fonctionnalités, et l'export statique est limité. Sur un seul serveur, voici ce que cela donne en pratique :

• Les composants serveur, les routes d'API et les réponses en streaming fonctionnent avec next start.
• next/image n'a besoin d'aucune configuration supplémentaire, et les images sont traitées sur le serveur.
• Le cache et la régénération statique incrémentale (ISR) fonctionnent d'eux-mêmes sur un seul serveur avec un disque persistant. Si vous faites tourner plusieurs copies, vous devez partager le cache entre elles.
• La recommandation officielle est de placer un reverse proxy devant plutôt que d'exposer Next.js directement. Coolify est livré avec Traefik pour cela, et Traefik obtient aussi le certificat.

Quelle puissance pour le serveur ?

C'est la compilation qui détermine la mémoire dont vous avez besoin, pas l'application en marche. next build atteint un pic, et l'application demande bien moins une fois démarrée. Coolify lui-même consomme aussi de la mémoire. Voici les valeurs que nous avons mesurées sur de vrais serveurs :

Le petit projet était l'application Next.js d'exemple de Coolify. Le plus gros était une application de chat IA écrite avec Next.js 16 et environ 85 paquets, et avec 2 Go elle a manqué de mémoire pendant la vérification TypeScript. Le serveur avait 2 Go de swap, et les chiffres montrent le point le plus haut. L'utilisation du disque après la première compilation était de 13 à 18 Go. Ce sont nos propres mesures, et votre projet sera différent. Si une compilation échoue faute de mémoire, augmentez d'abord la taille, puis réduisez-la plus tard si vous le pouvez.

Pas à pas

1. Connecter le dépôt

Connectez-vous à Coolify, ouvrez votre projet sur la page Projects et appuyez sur New resource. Pour un dépôt public, choisissez Public Git Repository, saisissez l'adresse et appuyez sur Check repository.

2. Ajouter une clé si le dépôt est privé

Dans le menu de gauche, allez à Private Keys sous Keys & Tokens et créez une clé avec Generate ED25519. Ajoutez la clé publique à Deploy keys sur la page Settings du dépôt sur GitHub. Utilisez ensuite New resource, choisissez Private Git Repository (with Deploy Key) et saisissez [email protected]:user/project.git. Laissez Build pack sur Railpack, qui reconnaît Next.js, et le port reste à 3000. Coolify indique que Railpack est en bêta : choisissez votre propre Dockerfile s'il vous pose problème.

3. Saisir les variables d'environnement

Sur la page Environment Variables, passez à Developer view et collez le contenu de votre fichier .env. Un détail compte ici : les variables dont le nom commence par NEXT_PUBLIC_ sont écrites dans le code pendant la compilation. Quand vous en modifiez une, appuyez sur Redeploy : le panneau voit qu'un réglage de compilation a changé et recompile. Ne donnez jamais ce préfixe à une clé que le navigateur ne doit pas voir.

4. Raccorder votre domaine

Créez chez votre fournisseur de domaine un enregistrement A qui pointe vers l'adresse IP du serveur. Dans Coolify, allez à la page Domains, appuyez sur Add domain, choisissez https comme protocole, saisissez votre domaine, enregistrez et déployez à nouveau. Le certificat est demandé et renouvelé automatiquement. Les ports 80 et 443 doivent être ouverts.

5. Déployer

Appuyez sur Deploy. La page Deployments affiche le journal de compilation en direct. Quand la compilation se termine, l'ancien conteneur continue de servir jusqu'à ce que le nouveau soit prêt.

Comment un git push devient-il un déploiement ?

À chaque push, GitHub envoie au panneau une requête signée. Le panneau vérifie la signature et recompile l'application pour cette branche, et une requête à la signature invalide est rejetée. Voici comment le configurer :

1. Sur la page Webhooks de l'application, copiez le Webhook URL de la section GitHub, saisissez dans Webhook secret une valeur aléatoire d'au moins 16 caractères et enregistrez.
2. Sur GitHub, ouvrez les Settings du dépôt, allez à Webhooks et appuyez sur Add webhook.
3. Placez l'adresse dans Payload URL et la même valeur dans Secret. Réglez Content type sur application/json et laissez push comme seul événement.

Pour essayer :

git commit --allow-empty -m "deploy test"

git push

La nouvelle compilation apparaît sur la page Deployments. Sur le petit projet d'exemple, un nouveau commit est passé en ligne en 41 secondes grâce au cache de compilation. GitHub doit pouvoir joindre l'adresse du panneau, et comme le panneau est installé avec une adresse HTTPS publique, rien de plus n'est nécessaire.

Erreurs courantes

Avec l'option Next.js de Seturack, Coolify arrive installé : le serveur local est validé, l'assistant de bienvenue est écarté et le panneau s'ouvre en HTTPS. L'adresse et le mot de passe apparaissent dans votre panneau, et vous commencez par connecter GitHub. Vous avez l'accès root, et vous pouvez tout gérer depuis le panneau si vous préférez. La sauvegarde quotidienne est incluse dans le prix et le trafic est illimité. Vous réglez la taille avec des curseurs sur la page VPS Next.js.

Prêt à l'emploi chez Seturack : Next.js, Coolify.