Dela via

Distribuera Next.js webbplatser i Azure Static Web Apps

  • Artikel

Next.js stöd för Azure Static Web Apps kan kategoriseras som två distributionsmodeller:

Hybridprogram Next.js (förhandsversion)

Static Web Apps stöder distribution av hybrid-Next.js webbplatser. Detta möjliggör stöd för alla Next.js funktioner, till exempel approuter och React Server-komponenter.

Hybrid-Next.js-program hanteras med hjälp av den globalt distribuerade statiska innehållsvärden för Static Web Apps och hanterade serverdelsfunktioner. Next.js serverdelsfunktioner finns på en dedikerad App Service-instans för att säkerställa fullständig funktionskompatibilitet.

Med hybridprogram Next.js kan sidor och komponenter återges dynamiskt, statiskt renderas eller renderas inkrementellt. Next.js avgör automatiskt den bästa renderings- och cachelagringsmodellen baserat på dina datahämtning för optimal prestanda.

Viktiga funktioner som är tillgängliga i förhandsversionen är:

Följ självstudien distribuera hybridprogram Next.js för att lära dig hur du distribuerar ett hybridprogram Next.js till Azure.

Funktioner som inte stöds i förhandsversionen

Följande funktioner i Static Web Apps stöds inte för Next.js med hybridåtergivning:

  • Välj Azure-tjänster: Länkade API:er med Hjälp av Azure Functions, Azure App Service, Azure Container Apps eller Azure API Management.
  • SWA CLI-funktioner: lokal SWA CLI-emulering och distribution.
  • Stöd för partiella funktioner: Följande egenskaper i staticwebapp.config.json filen stöds inte:
    • Återställning efter navigering stöds inte.
    • Dirigera omskrivningar till vägar i Next.js-programmet måste konfigureras i next.config.js.
    • Konfigurationen i staticwebapp.config.json filen har företräde framför konfigurationen i next.config.js.
    • Konfigurationen för den Next.js platsen ska hanteras med för next.config.js fullständig funktionskompatibilitet.
  • Bygghopp: För Next.js program om skip_api_build=truetar Static Web Apps inte bort dev-beroenden eller lägger till det skarpa paketet som standard. Om du vill ha de här optimeringarna lägger du till dem i dina anpassade byggsteg innan du skickar skip_app_build=true.
  • Inkrementell statisk regenerering (ISR): Cachelagring av bilder stöds inte.

Kommentar

Den maximala appstorleken för hybridprogrammet Next.js är 250 MB. Använd fristående funktion genom att Next.js för optimerade appstorlekar. Om detta inte räcker kan du överväga att använda statisk HTML-exporterad Next.js om kravet på appstorlek är mer än 250 MB.

Återgivning på serversidan

Följande steg visar hur du associerar en anpassad serverdel till din Standard-plan och över statiska webbappar.

Kommentar

Länkade serverdelar är endast tillgängliga för webbplatser som använder standardplanen eller senare.

  1. Gå till din statiska webbapp i Azure Portal.

  2. Välj Inställningar och sedan API:er på sidomenyn.

  3. Välj Konfigurera länkad serverdel.

  4. Skapa antingen en ny App Service-plan eller välj en befintlig App Service-plan.

    Din valda App Service-plan måste använda minst en S1 SKU.

  5. Klicka på Länk.

Statisk HTML-export

Du kan distribuera en Next.js statisk webbplats med hjälp av den statiska HTML-exportfunktionen i Next.js. Den här konfigurationen genererar statiska HTML-filer under bygget, som cachelagras och återanvänds för alla begäranden. Se de funktioner som stöds i Next.js statiska exporter.

Statiska Next.js platser finns i det globalt distribuerade Azure Static Web Apps-nätverket för optimala prestanda. Dessutom kan du lägga till länkade serverdelar för dina API:er.

Om du vill aktivera statisk export av ett Next.js-program lägger du till output: 'export' i nextConfig i next.config.js.

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

Du måste också ange output_location i GitHub Actions/Azure DevOps-konfigurationen. Som standard är det här värdet inställt på out enligt standardvärdena för Next.js. Om en anpassad utdataplats anges i Next.js konfigurationen ska värdet som anges för bygget matcha det som konfigurerats i Next.js export.

Om du använder anpassade byggskript anger du IS_STATIC_EXPORT till true i uppgiften Static Web Apps för GitHub Actions/Azure DevOps YAML-filen.

I följande exempel visas GitHub Actions-jobbet som är aktiverat för statisk export.

      - 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

Följ självstudien distribuera statiskt renderade Next.js webbplatser för att lära dig hur du distribuerar ett statiskt exporterat Next.js-program till Azure.