Distribuire Next.js siti Web su App Web statiche di Azure

Articolo
07/12/2024

Supporto Next.js in App Web statiche di Azure può essere classificato come due modelli di distribuzione:

Ibrido: siti ibridi Next.js, che includono il supporto per tutte le funzionalità di Next.js, ad esempio il router app, il router Pages e i componenti del server React
Statico: siti Next.js statici, che usano l'opzione Esportazione HTML statica di Next.js.

Applicazioni Next.js ibride (anteprima)

App Web statiche supporta la distribuzione di siti Web ibridi Next.js. In questo modo è possibile supportare tutte le funzionalità di Next.js, ad esempio Router app e Componenti React Server.

Le applicazioni di Next.js ibride vengono ospitate usando le funzioni statiche di hosting del contenuto statico e back-end gestite di App Web statiche distribuite a livello globale. Next.js le funzioni back-end sono ospitate in un'istanza del servizio app dedicata per garantire la compatibilità completa delle funzionalità.

Con applicazioni Next.js ibride, è possibile eseguire il rendering di pagine e componenti in modo dinamico, sottoposto a rendering statico o incrementale. Next.js determina automaticamente il miglior modello di rendering e memorizzazione nella cache in base al recupero dei dati per ottenere prestazioni ottimali.

Le funzionalità principali disponibili nell'anteprima sono:

Seguire l'esercitazione distribuire applicazioni Next.js ibride per informazioni su come distribuire un'applicazione ibrida Next.js in Azure.

Funzionalità non supportate in anteprima

Le funzionalità seguenti di App Web statiche non sono supportate per Next.js con rendering ibrido:

Selezionare Servizi di Azure: API collegate con Funzioni di Azure, Servizio app di Azure, App contenitore di Azure o Gestione API di Azure.
Funzionalità dell'interfaccia della riga di comando di SWA: emulazione e distribuzione dell'interfaccia della riga di comando SWA locale.
Supporto parziale delle funzionalità: le proprietà seguenti nel file staticwebapp.config.json non sono supportate:
- Il fallback di navigazione non è supportato.
- Le riscritture di route alle route all'interno dell'applicazione Next.js devono essere configurate all'interno di next.config.js.
- La configurazione all'interno del file staticwebapp.config.json ha la precedenza sulla configurazione all'interno di next.config.js.
- La configurazione per il sito Next.js deve essere gestita usando next.config.js per garantire la compatibilità completa delle funzionalità.
Compilazione ignorata: le funzionalità skip_app_build e skip_api_build non sono supportate nell'immagine di distribuzione Azure/static-web-apps-deploy@v1.
Rigenerazione statica incrementale (ISR): la memorizzazione nella cache delle immagini non è supportata.

Nota

La dimensione massima dell'app per l'applicazione ibrida di Next.js è 250 MB. Usare la funzionalità autonoma di Next.js per ottimizzare le dimensioni delle app. Se non è sufficiente, è consigliabile usare Next.js esportato in HTML statico se il requisito di dimensioni dell'app è superiore a 250 MB.

Rendering lato server

I passaggi seguenti illustrano come associare un back-end personalizzato al piano Standard e alle app Web statiche precedenti.

Nota

I back-end collegati sono disponibili solo per i siti che usano il piano Standard o versione successiva.

Passare all'app Web statica nel portale di Azure.
Selezionare Impostazioni e quindi API dal menu laterale.
Selezionare Configura back-end collegato.
Creare un nuovo piano di servizio app o selezionare un piano di servizio app esistente.

Il piano di servizio app selezionato deve usare almeno uno SKU S1.
Fare clic su Collegamento.

Esportazione HTML statica

È possibile distribuire un sito statico Next.js usando la funzionalità di esportazione HTML statica di Next.js. Questa configurazione genera file HTML statici durante la compilazione, che vengono memorizzati nella cache e riutilizzati per tutte le richieste. Vedere le funzionalità supportate di Next.js esportazioni statiche.

I siti Next.js statici sono ospitati nella rete distribuita a livello globale di App Web statiche di Azure per ottenere prestazioni ottimali. È anche possibile aggiungere back-end collegati per le API.

Per abilitare l'esportazione statica di un'applicazione Next.js, aggiungere output: 'export' a nextConfig in next.config.js.

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

È anche necessario specificare output_location nella configurazione di GitHub Actions/Azure DevOps. Per impostazione predefinita, questo valore è impostato su out in base alle impostazioni predefinite Next.js. Se nella configurazione di Next.js è indicato un percorso di output personalizzato, il valore specificato per la compilazione deve corrispondere a quello configurato nell'esportazione di Next.js.

Se si usano script di compilazione personalizzati, impostare IS_STATIC_EXPORT su true nell'attività App Web statiche del file YAML GitHub Actions/Azure DevOps.

L'esempio seguente mostra il processo di GitHub Actions abilitato per le esportazioni statiche.

      - 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

Seguire l'esercitazione distribuire siti Web con rendering statico Next.js per informazioni su come distribuire un'applicazione Next.js esportata in modo statico in Azure.

Condividi tramite