Comment créer une exportation statique de votre application Next.js

Next.js permet de démarrer comme un site statique ou une application monopage (SPA), puis de passer ultérieurement à des fonctionnalités nécessitant un serveur.

Lors de l'exécution de next build, Next.js génère un fichier HTML par route. En décomposant une SPA stricte en fichiers HTML individuels, Next.js peut éviter de charger du code JavaScript inutile côté client, réduisant ainsi la taille du bundle et permettant des chargements de page plus rapides.

Puisque Next.js prend en charge cette exportation statique, elle peut être déployée et hébergée sur n'importe quel serveur web capable de servir des ressources statiques HTML/CSS/JS.

Configuration

Pour activer une exportation statique, modifiez le mode de sortie dans next.config.js :

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',

  // Optionnel : Change les liens `/me` -> `/me/` et émet `/me.html` -> `/me/index.html`
  // trailingSlash: true,

  // Optionnel : Empêche la conversion automatique `/me` -> `/me/`, préserve `href`
  // skipTrailingSlashRedirect: true,

  // Optionnel : Change le répertoire de sortie `out` -> `dist`
  // distDir: 'dist',
}

module.exports = nextConfig

Après avoir exécuté next build, Next.js créera un dossier out contenant les ressources HTML/CSS/JS de votre application.

Vous pouvez utiliser getStaticProps et getStaticPaths pour générer un fichier HTML pour chaque page de votre répertoire pages (ou plus pour les routes dynamiques).

Fonctionnalités prises en charge

La majorité des fonctionnalités principales de Next.js nécessaires pour construire un site statique sont prises en charge, notamment :

• Routes dynamiques avec getStaticPaths
• Préchargement avec next/link
• Préchargement du JavaScript
• Importations dynamiques
• Toutes les options de style (par exemple CSS Modules, styled-jsx)
• Récupération de données côté client
• getStaticProps
• getStaticPaths

Optimisation des images

L'optimisation des images via next/image peut être utilisée avec une exportation statique en définissant un chargeur d'image personnalisé dans next.config.js. Par exemple, vous pouvez optimiser les images avec un service comme Cloudinary :

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    loader: 'custom',
    loaderFile: './my-loader.ts',
  },
}

module.exports = nextConfig

Ce chargeur personnalisé définira comment récupérer les images depuis une source distante. Par exemple, le chargeur suivant construira l'URL pour Cloudinary :

export default function cloudinaryLoader({
  src,
  width,
  quality,
}: {
  src: string
  width: number
  quality?: number
}) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(
    ','
  )}${src}`
}

Vous pouvez ensuite utiliser next/image dans votre application, en définissant des chemins relatifs vers l'image dans Cloudinary :

import Image from 'next/image'

export default function Page() {
  return <Image alt="turtles" src="/turtles.jpg" width={300} height={300} />
}

Fonctionnalités non prises en charge

Les fonctionnalités nécessitant un serveur Node.js, ou une logique dynamique qui ne peut pas être calculée pendant le processus de construction, ne sont pas prises en charge :

• Routage internationalisé
• Routes API
• Réécritures
• Redirections
• En-têtes
• Middleware
• Régénération statique incrémentielle
• Optimisation des images avec le loader par défaut
• Mode brouillon
• getStaticPaths avec fallback: true
• getStaticPaths avec fallback: 'blocking'
• getServerSideProps

Déploiement

Avec une exportation statique, Next.js peut être déployé et hébergé sur n'importe quel serveur web capable de servir des ressources statiques HTML/CSS/JS.

Lors de l'exécution de next build, Next.js génère l'exportation statique dans le dossier out. Par exemple, supposons que vous ayez les routes suivantes :

• /
• /blog/[id]

Après avoir exécuté next build, Next.js générera les fichiers suivants :

• /out/index.html
• /out/404.html
• /out/blog/post-1.html
• /out/blog/post-2.html

Si vous utilisez un hôte statique comme Nginx, vous pouvez configurer des réécritures depuis les requêtes entrantes vers les fichiers corrects :

server {
  listen 80;
  server_name acme.com;

  root /var/www/out;

  location / {
      try_files $uri $uri.html $uri/ =404;
  }

  # Ceci est nécessaire lorsque `trailingSlash: false`.
  # Vous pouvez omettre ceci lorsque `trailingSlash: true`.
  location /blog/ {
      rewrite ^/blog/(.*)$ /blog/$1.html break;
  }

  error_page 404 /404.html;
  location = /404.html {
      internal;
  }
}

Historique des versions