Bereitstellen von Next.js-Websites in Azure Static Web Apps

  • Artikel

Next.js Unterstützung für Statische Azure Web Apps kann als zwei Bereitstellungsmodelle kategorisiert werden:

Next.js-Hybridanwendungen (Vorschau)

Static Web Apps unterstützt die Bereitstellung von Hybrid-Next.js Websites. Dies ermöglicht die Unterstützung für alle Next.js Features, z. B. den App-Router und React-Serverkomponenten.

Hybrid-Next.js-Anwendungen werden mithilfe des global verteilten statischen Inhaltshosts und verwalteten Back-End-Funktionen gehostet. Next.js Back-End-Funktionen werden in einer dedizierten App Service-Instanz gehostet, um die vollständige Featurekompatibilität sicherzustellen.

Mit hybriden Next.js Anwendungen können Seiten und Komponenten dynamisch gerendert, statisch gerendert oder inkrementell gerendert werden. Next.js bestimmt automatisch das beste Rendering- und Zwischenspeicherungsmodell basierend auf dem Abrufen von Daten, um optimale Leistung zu erzielen.

Wichtige Features, die in der Vorschau verfügbar sind:

Im Tutorial Bereitstellen von hybriden Next.js-Websites in Azure Static Web Apps erfahren Sie, wie Sie eine Next.js-Hybridanwendung in Azure bereitstellen.

Nicht unterstützte Funktionen in der Vorschauversion

Die folgenden Features statischer Web-Apps werden für Next.js mit Hybridrendering nicht unterstützt:

  • Verknüpfte APIs mit Azure Functions, Azure App Service, Azure Container Apps oder Azure API Management.
  • Lokale SWA CLI-Emulation und -Bereitstellung.
  • Nur teilweise Unterstützung für die staticwebapp.config.json-Datei.
    • Navigations-Fallback wird nicht unterstützt.
    • Das Umschreiben von Routen auf Routen innerhalb der Next.js-Anwendung muss in next.config.js konfiguriert werden.
    • Die Konfiguration in der Datei staticwebapp.config.json hat Vorrang vor der Konfiguration in next.config.js.
    • Die Konfiguration für die Next.js-Website sollte mit next.config.js erfolgen, um die volle Funktionskompatibilität zu gewährleisten.
  • skip_app_build und skip_api_build kann nicht innerhalb des Azure/static-web-apps-deploy@v1 Bereitstellungsimages verwendet werden.
  • ISR (Inkrementelle statische Regeneration) unterstützt nicht das Zwischenspeichern von Images.

Hinweis

Die maximale App-Größe für die hybride Next.js Anwendung beträgt 250 MB. Verwenden Sie eigenständige Features von Next.js für optimierte App-Größen. Wenn dies nicht ausreicht, sollten Sie erwägen, denstatischen HTML-Export von Next.js zu verwenden, wenn Ihre App mehr als 250 MB benötigt.

Statischer HTML-Export

Sie können eine statische Next.js-Website mithilfe des Features für statische HTML-Export von Next.js bereitstellen. Diese Konfiguration generiert statische HTML-Dateien während des Builds, die zwischengespeichert und für alle Anforderungen wiederverwendet werden. Sehen Sie sich die unterstützten Features von Next.js statischen Exportenan.

Statische Next.js-Websites werden auf dem global verteilten Azure Static Web Apps-Netzwerk gehostet, um eine optimale Leistung zu erzielen. Darüber hinaus können Sie verknüpfte Back-Ends für Ihre APIs hinzufügen.

Um den statischen Export einer Next.js-Anwendung zu aktivieren, fügen Sie output: 'export' zur nextConfig in next.config.js hinzu.

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

Sie müssen das output_location auch in der GitHub Actions/Azure DevOps Konfiguration angeben. Standardmäßig ist dieser Wert gemäß den Next.js-Vorgaben auf out gesetzt. Wenn in der Next.js-Konfiguration ein benutzerdefinierter Ausgabespeicherort angegeben ist, sollte der für den Build angegebene Wert mit dem wert übereinstimmen, der im Export Next.js konfiguriert ist.

Wenn Sie benutzerdefinierte Buildskripts verwenden, legen Sie in der Static Web Apps-Aufgabe der YAML-Datei für GitHub Actions/Azure DevOps IS_STATIC_EXPORT auf true fest.

Das folgende Beispiel zeigt den GitHub Actions-Auftrag, der für statische Exporte aktiviert ist.

      - 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

Befolgen Sie das Tutorial Bereitstellen von statisch gerenderten Next.js-Websites in Azure Static Web Apps, um zu erfahren, wie Sie eine statisch exportierte Next.js-Anwendung in Azure bereitstellen.