Déploiement

Félicitations ! Vous êtes ici parce que vous êtes prêt à déployer votre application Next.js. Cette page vous montrera comment déployer soit de manière managée soit auto-hébergée en utilisant l'API de build Next.js.

API de build Next.js

next build génère une version optimisée de votre application pour la production. Cette sortie standard inclut :

Des fichiers HTML pour les pages utilisant getStaticProps ou l'Optimisation statique automatique
Des fichiers CSS pour les styles globaux ou les styles scopés individuellement
Du JavaScript pour le pré-rendu de contenu dynamique depuis le serveur Next.js
Du JavaScript pour l'interactivité côté client via React

Cette sortie est générée dans le dossier .next :

.next/static/chunks/pages – Chaque fichier JavaScript dans ce dossier correspond à la route du même nom. Par exemple, .next/static/chunks/pages/about.js serait le fichier JavaScript chargé lors de l'affichage de la route /about dans votre application
.next/static/media – Les images importées statiquement depuis next/image sont hachées et copiées ici
.next/static/css – Les fichiers CSS globaux pour toutes les pages de votre application
.next/server/pages – Les points d'entrée HTML et JavaScript pré-rendus depuis le serveur. Les fichiers .nft.json sont créés lorsque le Tracé de fichiers de sortie est activé et contiennent tous les chemins de fichiers dépendants d'une page donnée.
.next/server/chunks – Morceaux JavaScript partagés utilisés à plusieurs endroits de votre application
.next/cache – Sortie pour le cache de build et les images, réponses et pages mises en cache depuis le serveur Next.js. Utiliser un cache aide à réduire les temps de build et améliorer les performances de chargement des images

Tout le code JavaScript dans .next a été compilé et les bundles navigateur ont été minifiés pour aider à atteindre les meilleures performances et supporter tous les navigateurs modernes.

Next.js managé avec Vercel

Vercel est la façon la plus rapide de déployer votre application Next.js avec zéro configuration.

Lors du déploiement sur Vercel, la plateforme détecte automatiquement Next.js, exécute next build, et optimise la sortie de build pour vous, incluant :

Persistance des assets en cache entre les déploiements s'ils sont inchangés
Déploiements immuables avec une URL unique pour chaque commit
Les Pages sont automatiquement optimisées statiquement, si possible
Les assets (JavaScript, CSS, images, polices) sont compressés et servis depuis un Réseau Global Edge
Les Routes API sont automatiquement optimisées comme des Fonctions Serverless isolées pouvant s'étendre infiniment
Le Middleware est automatiquement optimisé comme des Fonctions Edge qui ont zéro démarrage à froid et démarrent instantanément

De plus, Vercel fournit des fonctionnalités comme :

Surveillance automatique des performances avec Next.js Speed Insights
HTTPS et certificats SSL automatiques
CI/CD automatique (via GitHub, GitLab, Bitbucket, etc.)
Support pour les Variables d'environnement
Support pour les Domaines personnalisés
Support pour l'Optimisation d'images avec next/image
Déploiements globaux instantanés via git push

Déployez une application Next.js sur Vercel gratuitement pour l'essayer.

Auto-hébergement

Vous pouvez auto-héberger Next.js avec support pour toutes les fonctionnalités en utilisant Node.js ou Docker. Vous pouvez aussi faire une Exportation HTML Statique, qui a certaines limitations.

Serveur Node.js

Next.js peut être déployé sur n'importe quel hébergeur supportant Node.js. Par exemple, AWS EC2 ou un DigitalOcean Droplet.

D'abord, assurez-vous que votre package.json a les scripts "build" et "start" :

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Puis, exécutez npm run build pour construire votre application. Enfin, exécutez npm run start pour démarrer le serveur Node.js. Ce serveur supporte toutes les fonctionnalités de Next.js.

Si vous utilisez next/image, envisagez d'ajouter sharp pour une Optimisation d'images plus performante dans votre environnement de production en exécutant npm install sharp dans votre répertoire de projet. Sur les plateformes Linux, sharp peut nécessiter une configuration supplémentaire pour éviter une utilisation excessive de la mémoire.

Image Docker

Next.js peut être déployé sur n'importe quel hébergeur supportant les conteneurs Docker. Vous pouvez utiliser cette approche lors du déploiement sur des orchestrateurs de conteneurs comme Kubernetes ou HashiCorp Nomad, ou lors de l'exécution sur un seul nœud dans n'importe quel fournisseur cloud.

Installez Docker sur votre machine
Clonez l'exemple with-docker
Construisez votre conteneur : docker build -t nextjs-docker .
Exécutez votre conteneur : docker run -p 3000:3000 nextjs-docker

Si vous avez besoin d'utiliser différentes Variables d'environnement dans plusieurs environnements, consultez notre exemple with-docker-multi-env.

Exportation HTML Statique

Si vous souhaitez faire une exportation HTML statique de votre application Next.js, suivez les instructions de notre documentation sur l'Exportation HTML Statique.

Autres services

Les services suivants supportent Next.js v12+. Ci-dessous, vous trouverez des exemples ou guides pour déployer Next.js sur chaque service.

Serveur managé

Bon à savoir : Il existe aussi des plateformes managées qui vous permettent d'utiliser un Dockerfile comme montré dans l'exemple ci-dessus.

Statique uniquement

Les services suivants ne supportent que le déploiement de Next.js en utilisant output: 'export'.

GitHub Pages

Vous pouvez aussi déployer manuellement la sortie de output: 'export' sur n'importe quel hébergeur statique, souvent via votre pipeline CI/CD comme GitHub Actions, Jenkins, AWS CodeBuild, Circle CI, Azure Pipelines, et plus.

Serverless

Bon à savoir : Tous les fournisseurs serverless n'implémentent pas l'API de build Next.js depuis next start. Veuillez vérifier avec le fournisseur pour voir quelles fonctionnalités sont supportées.

Mises à jour automatiques

Lorsque vous déployez votre application Next.js, vous voulez voir la dernière version sans avoir besoin de recharger.

Next.js chargera automatiquement la dernière version de votre application en arrière-plan lors du routage. Pour les navigations côté client, next/link fonctionnera temporairement comme une balise <a> normale.

Bon à savoir : Si une nouvelle page (avec une ancienne version) a déjà été préchargée par next/link, Next.js utilisera l'ancienne version. Naviguer vers une page qui n'a pas été préchargée (et qui n'est pas mise en cache au niveau du CDN) chargera la dernière version.

Arrêts gracieux manuels

Lors de l'auto-hébergement, vous pourriez vouloir exécuter du code lorsque le serveur s'arrête sur les signaux SIGTERM ou SIGINT.

Vous pouvez définir la variable d'environnement NEXT_MANUAL_SIG_HANDLE à true puis enregistrer un gestionnaire pour ce signal dans votre fichier _document.js. Vous devrez enregistrer la variable d'environnement directement dans le script package.json, pas dans le fichier .env.

Bon à savoir : La gestion manuelle des signaux n'est pas disponible dans next dev.

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "NEXT_MANUAL_SIG_HANDLE=true next start"
  }
}

pages/_document.js

if (process.env.NEXT_MANUAL_SIG_HANDLE) {
  // ceci devrait être ajouté dans votre _document personnalisé
  process.on('SIGTERM', () => {
    console.log('Signal SIGTERM reçu : ', 'nettoyage en cours')
    process.exit(0)
  })

  process.on('SIGINT', () => {
    console.log('Signal SIGINT reçu : ', 'nettoyage en cours')
    process.exit(0)
  })
}