Déployez vos
sites statiques Next.js
Exportez votre app Next.js en HTML et fichiers statiques, téléversez le dossier out et publiez-la mondialement sans faire tourner de serveur Node.js.
Matrice de support de l'export statique
Avant de téléverser out, vérifiez que l'app correspond au modèle d'export statique.
Fonctionne bien
- Routes statiques générées au build
- Pages App Router rendables statiquement
- Pages Router getStaticProps / getStaticPaths
- Chargement de données côté client après hydratation
- next/link, imports dynamiques, CSS Modules et fichiers statiques
Demande un autre environnement d'exécution
- API routes et route handlers qui demandent une exécution serveur
- Middleware, rewrites, redirects et headers personnalisés
- getServerSideProps et rendu à la requête
- Incremental Static Regeneration
- Optimisation next/image par défaut sans stratégie statique personnalisée
Utilisez Next.js quand vous voulez le framework, pas le serveur
Gardez le framework, retirez le serveur
L'export statique Next.js permet de conserver le routage par fichiers, les layouts, les métadonnées, le rendu au build, la prise en charge CSS et React côté client quand elle est utile.
La sortie reste pourtant de simples fichiers. C'est adapté aux sites marketing, docs, portfolios, pages produit, hubs de contenu et autres pages préparables au build.
Rapide comme un fichier statique
Le HTML pré-rendu peut être mis en cache agressivement et servi directement depuis des nœuds de diffusion sans attendre un serveur de rendu.
Moins de charge opérationnelle
Sans runtime Node, il y a moins de pièces mobiles, des artefacts de déploiement plus simples et moins de dérive de production entre les builds.
Frontière d'exécution claire
Si une page a besoin de code serveur, elle ne doit pas être forcée dans l'export statique. Si elle peut être construite à l'avance, le dossier out est un artefact propre à publier.
Blocages fréquents de l'export statique
Le build échoue à cause de fonctionnalités serveur
Retirez les API à la requête de la route exportée, déplacez-les derrière un back-end séparé ou déployez cette partie sur une plateforme capable d'exécuter du code serveur.
Les images fonctionnent en dev mais échouent après export
L'optimiseur next/image par défaut attend un serveur. Utilisez images.unoptimized, un loader personnalisé ou des images statiques classiques.
Des routes dynamiques manquent
Générez la liste des routes au build avec generateStaticParams dans l'App Router ou getStaticPaths dans le Pages Router.
Les redirects ou rewrites ne s'appliquent pas
Les redirects et rewrites Next.js ne font pas partie de l'export statique. Utilisez une structure de pages statiques, une navigation client ou des redirects au niveau plateforme quand disponibles.
Checklist export statique Next.js
Définir output: 'export'
Demandez à Next.js d'émettre du HTML statique au build au lieu d'attendre next start ou un runtime Node hébergé.
output: 'export'Construire et vérifier /out
Lancez le build de production et confirmez que le dossier out contient les pages rendues, fichiers, page 404 et fichiers statiques à publier.
npm run buildTéléverser et tester les routes
Téléversez le dossier out, puis validez les chemins imbriqués, fichiers statiques et images non optimisées sur le site déployé.
FAQ déploiement Next.js
Pourquoi le composant Image de Next.js échoue-t-il après export ?
Le pipeline d'optimisation Image par défaut attend un serveur. Pour un export statique, définissez images.unoptimized à true dans next.config.js.
Les API routes ou getServerSideProps fonctionnent-ils ici ?
Non. L'export statique retire les fonctionnalités runtime serveur comme API routes, middleware et getServerSideProps. Déplacez cette logique vers un back-end ou service serverless séparé.
Puis-je utiliser l'App Router ?
Oui, tant que la route peut être rendue statiquement et ne dépend pas d'API dynamiques réservées serveur comme headers ou cookies.
Comment gérer le contenu dynamique ?
Récupérez-le au build quand c'est possible, ou chargez-le côté client après hydratation. L'export statique fonctionne mieux quand le HTML peut être préparé à l'avance.
Dois-je téléverser .next ou out ?
Téléversez out pour output: 'export'. Le dossier .next est un dossier de build interne Next.js et n'est pas l'artefact d'export statique à publier.
Est-ce un remplacement de l'hébergement Next.js sur Vercel ?
C'est adapté aux exports statiques, pas à toutes les apps Next.js. Si vous dépendez de SSR, middleware, ISR, server actions ou API routes, il faut un environnement d'exécution qui prend en charge ces fonctionnalités.