Partager via

Déployer des sites web Next.js sur Azure Static Web Apps

  • Article

La prise en charge de Next.js sur Azure Static Web Apps peut être classée en deux modèles de déploiement :

Applications Next.js hybrides (préversion)

Static Web Apps prend en charge le déploiement de sites web Next.js hybrides. Cela permet la prise en charge de toutes les fonctionnalités de Next.js, comme le Routeur d’application et les composants React Server.

Les applications Next.js hybrides sont hébergées avec l’hôte de contenu statique globalement distribué Static Web Apps et les fonctions de back-end managées. Les fonctions de back-end Next.js sont hébergées sur une instance App Service dédiée pour garantir la compatibilité complète des fonctionnalités.

Avec les applications hybrides Next.js, les pages et les composants peuvent être affichés dynamiquement, statiquement ou de manière incrémentielle. Next.js détermine automatiquement le meilleur modèle de rendu et de mise en cache en fonction de votre extraction de données pour garantir des performances optimales.

Les principales fonctionnalités disponibles dans la préversion sont les suivantes :

Suivez le tutoriel Déployer des applications Next.js hybrides pour découvrir comment déployer une application Next.js hybride sur Azure.

Fonctionnalités non prises en charge dans la préversion

Les fonctionnalités suivantes de Static Web Apps ne sont pas prises en charge pour Next.js avec le rendu hybride :

  • Sélectionner des services Azure : API liées utilisant Azure Functions, Azure App Service, Azure Container Apps ou Gestion des API Azure.
  • Fonctionnalités de l’interface CLI SWA : émulation et déploiement locaux de l’interface CLI SWA.
  • Prise en charge des fonctionnalités partielles : les propriétés suivantes dans le fichier staticwebapp.config.json ne sont pas prises en charge :
    • Le secours de navigation n’est pas pris en charge.
    • Les réécritures de routes vers des routes au sein de l’application Next.js doivent être configurées dans next.config.js.
    • La configuration dans le fichier staticwebapp.config.json est prioritaire sur la configuration dans next.config.js.
    • La configuration du site Next.js doit être gérée avec next.config.js pour la compatibilité complète des fonctionnalités.
  • Ignorer la génération : pour les applications Next.js si skip_api_build=true, Static Web Apps ne supprime pas les dépendances de développement ni n’ajoute de package sharp par défaut. Si vous souhaitez bénéficier de ces optimisations, ajoutez-les à vos étapes de génération personnalisée avant de soumettre skip_app_build=true.
  • Regénération statique incrémentielle (ISR) : la mise en cache des images n’est pas prise en charge.

Remarque

La taille maximale de l’application Next.js hybride est 250 Mo. Utilisez la fonctionnalité standalone de Next.js pour optimiser les tailles d’application. Si cela ne suffit pas, utilisez Next.js exporté en HTML statique si la taille d’application dont vous avez besoin est supérieure à 250 Mo.

Rendu côté serveur

Les étapes suivantes vous montrent comment associer un back-end personnalisé à vos applications web statiques du plan Standard et supérieur.

Remarque

Les back-ends liés sont disponibles uniquement pour les sites utilisant le plan Standard ou supérieur.

  1. Accédez à votre application web statique dans le Portail Azure.

  2. Sélectionnez Paramètres, puis API dans le menu latéral.

  3. Sélectionnez Configurer le back-end lié.

  4. Créez un plan App Service ou sélectionnez un plan App Service existant.

    Votre plan App Service sélectionné doit utiliser au moins une référence SKU S1.

  5. Cliquez sur Lier.

Exportation HTML statique

Vous pouvez déployer un site statique Next.js à l’aide de la fonctionnalité d’exportation HTML statique de Next.js. Cette configuration génère des fichiers HTML statiques durant la build, qui sont mis en cache et réutilisés pour toutes les requêtes. Consultez les fonctionnalités prises en charge des exportations statiques Next.js.

Les sites Next.js statiques sont hébergés sur le réseau globalement distribué Azure Static Web Apps pour des performances optimales. Par ailleurs, vous pouvez ajouter des back-ends liés pour vos API.

Pour activer l’exportation statique d’une application Next.js, ajoutez output: 'export' à nextConfig dans next.config.js.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
 
  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}
 
module.exports = nextConfig

Vous devez également spécifier output_location dans la configuration GitHub Actions/Azure DevOps. Par défaut, cette valeur est définie sur out conformément aux valeurs par défaut de Next.js. Si un emplacement de sortie personnalisé est indiqué dans la configuration de Next.js, la valeur fournie pour la génération doit correspondre à celle configurée dans l’exportation de Next.js.

Si vous utilisez des scripts de build personnalisés, définissez IS_STATIC_EXPORT sur true dans la tâche Static Web Apps du fichier YAML GitHub Actions/Azure DevOps.

L’exemple suivant montre le travail GitHub Actions qui est activé pour les exportations statiques.

      - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "out" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

Suivez le tutoriel Déployer des sites web Next.js au rendu statique pour découvrir comment déployer une application Next.js exportée de manière statique sur Azure.