Lorsqu’on fait un export statique d’une application Next.js pour l’héberger sur Azure Static Web Apps, l’application ne fonctionne que lorsqu’on accède à la racine de l’application (/). Les autres chemins (ex : /ma-page) retourne une erreur 404.

Pour que le chemin /ma-page fonctionne, il faut en fait rediriger vers /ma-page/index.html.

On peut faire ça pour toutes les pages automatiquement, via un peu de configuration.

1. Modifiez le fichier next.config.mjs pour y ajouter trailingSlash: true. Exemple :

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

2. Créez un fichier staticwebapp.config.json à la racine, destiné à Azure Static Web Apps :

   {
     "navigationFallback": {
       "rewrite": "index.html",
       "exclude": ["*.{png,jpg,gif,svg}", "*.css"]
     }
   }