Freigeben über

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:

  • Bestimmte Azure-Dienste: Verknüpfte APIs, die Azure Functions, Azure App Service, Azure Container Apps oder Azure API Management nutzen
  • SWA CLI-Features: Lokale SWA CLI-Emulation und -Bereitstellung
  • Partielle Featureunterstützung: Die folgenden Eigenschaften in der Datei staticwebapp.config.json werden nicht unterstützt:
    • 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.
  • Buildüberspringen: Bei Next.js-Anwendungen entfernt Static Web Apps bei skip_api_build=true keine Entwicklungsabhängigkeiten und fügt standardmäßig das sharp-Paket nicht hinzu. Wenn Sie diese Optimierungen benötigen, fügen Sie sie Ihren benutzerdefinierten Buildschritten hinzu, bevor Sie skip_app_build=true übergeben.
  • Inkrementelle statische Regeneration (ISR): Das Zwischenspeichern von Images wird nicht unterstützt.

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.

Serverseitiges Rendering

In den folgenden Schritten wird gezeigt, wie Sie Static Web Apps mit dem Plan „Standard“ oder höher mit einem benutzerdefinierten Back-End verknüpfen.

Hinweis

Verknüpfte Back-Ends sind nur für Websites verfügbar, bei denen der Plan „Standard“ oder höher verwendet wird.

  1. Wechseln Sie im Azure-Portal zu Ihrer statischen Web-App.

  2. Wählen Sie im seitlichen Menü die Option Einstellungen und dann APIs aus.

  3. Wählen Sie Configure linked backend (Verknüpftes Back-End konfigurieren) aus.

  4. Erstellen Sie einen neuen App Service-Plan, oder wählen Sie einen vorhandenen App Service-Plan aus.

    Ihr ausgewählter App Service-Plan muss mindestens eine S1-SKU verwenden.

  5. Klicke auf Link (Verknüpfen).

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.