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

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:

• Router app e router pagine
• Componenti del server React
• Rendering ibrido
• Gestori di route
• Ottimizzazione delle immagini
• Internazionalizzazione
• Middleware
• Autenticazione

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: per le applicazioni Next.js se skip_api_build=true, App Web statiche non rimuove le dipendenze di sviluppo o aggiunge il pacchetto sharp per impostazione predefinita. Per queste ottimizzazioni, aggiungerle ai passaggi di compilazione personalizzati prima di skip_app_build=truepassare .
• Rigenerazione statica incrementale (ISR): la memorizzazione nella cache delle immagini non è supportata.

Rendering lato server

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

1. Passare all'app Web statica nel portale di Azure.

2. Selezionare Impostazioni e quindi API dal menu laterale.

3. Selezionare Configura back-end collegato.

4. 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.

5. 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.