Une exportation statique de Next.js se compose uniquement de HTML, CSS et JavaScript. Aucun serveur ne fonctionne, aucune base de données n'attend et l'hébergement est gratuit sur Netlify. Si vos pages ne lisent pas les cookies par demande ou ne modifient pas les données, faites-le. Il s’agit du gain de performance le moins cher qui soit.

Activer l'exportation statique

Dans next.config.ts, définissez la sortie pour exporter et désactivez l'optimiseur d'image, qui nécessite un serveur en direct :

const nextConfig: NextConfig = {
  output: "export",
  trailingSlash: true,
  images: { unoptimized: true },
};

Tout composant qui utilise des cookies, des actions de serveur ou un middleware fera désormais échouer la construction, bruyamment et au moment de la compilation. C'est la fonctionnalité, pas un bug : vous apprenez ce qui est dynamique avant le déploiement, pas après.

Dites à Netlify où se trouve le site

Le plugin Next.js de Netlify détecte la sortie : exporte par lui-même et copie le dossier de sortie. Votre netlify.toml peut comporter deux lignes :

[build]
  command = "npm run build"
  publish = "out"
  1. npm run build exécute la prochaine build, qui écrit l'intégralité du site dans out/ sous forme de fichiers HTML.
  2. Netlify publie sur/sur son CDN mondial. Chaque page est un fichier. Rien pour démarrer, rien pour planter.
  3. Ajoutez public/_headers pour une longue durée de vie du cache sur les images, les polices et les bundles.

Sachez à quoi vous abandonnez

  • Pas de middleware ni de réécriture, car aucun gestionnaire de requêtes n'existe plus.
  • Aucune action du serveur ni gestionnaire de routage qui lit la demande.
  • Les images sont livrées telles quelles, alors redimensionnez-les une fois au moment de la construction et expédiez WebP.
Statique n’est pas un déclassement. C’est choisir que vos pages existent avant qu’un visiteur n’apparaisse.

Pour tout ce que les gens lisent, le statique est très agréable : il est rapide partout, ne coûte rien et un déploiement ne peut pas interrompre une page en cours d'exécution. Vous voulez la recette complète pour que les moteurs de recherche remarquent le nouveau site ? Nous l'avons écrit ici.