𝗤𝗨𝗔𝗡𝗗𝗢 𝗨𝗡 𝗦𝗘𝗠𝗣𝗟𝗜𝗖𝗘 𝗥𝗘𝗙𝗥𝗘𝗦𝗛 𝗛𝗔 𝗥𝗢𝗧𝗧𝗢 𝗟𝗔 𝗡𝗢𝗦𝗧𝗥𝗔 𝗔𝗣𝗣

Abbiamo trovato un bug. Le rotte principali funzionavano bene. Le rotte profonde causavano il ricaricamento completo della pagina. La barra laterale si resettava ogni volta. L'app sembrava instabile.

Funzionava in locale. Falliva in produzione.

Abbiamo usato l'export statico di Next.js su Azure Static Web Apps. Questa configurazione non ha un runtime lato server. Serve file statici.

Il problema era la soft navigation. Next.js ha bisogno dei dati del payload delle rotte per transizioni fluide. Ha bisogno dell'HTML per il caricamento iniziale.

Le nostre regole di rewrite su Azure erano troppo generiche. Azure inviava HTML quando Next.js richiedeva i dati del payload. Il router falliva. L'app si ricaricava.

Abbiamo risolto il problema con l'automazione. Abbiamo creato uno strumento per generare le regole di rewrite a partire dall'output della build. Lo strumento ora:

  • Scansiona i file delle rotte dinamiche.
  • Crea regole specifiche per HTML e payload.
  • Ordina le regole per priorità.
  • Scrive il file di configurazione finale.

Questo ha eliminato gli errori manuali.

Se usi l'export statico su Azure:

  • Automatizza i tuoi file di configurazione.
  • Testa la soft navigation.
  • Verifica se le richieste di payload restituiscono HTML.
  • Tratta le regole di rewrite come infrastruttura critica.

I bug frontend complessi spesso si annidano tra l'output della build e le regole di hosting.

Fonte: https://dev.to/suraj_thallapelli_55c6f59/when-a-simple-refresh-broke-our-production-app-nextjs-static-export-on-azure-2ano