Delen via

Next.js websites implementeren in Azure Static Web Apps

  • Artikel

Next.js ondersteuning voor Azure Static Web Apps kan worden gecategoriseerd als twee implementatiemodellen:

Hybride Next.js-toepassingen (preview)

Static Web Apps ondersteunt het implementeren van hybride Next.js websites. Dit maakt ondersteuning mogelijk voor alle Next.js functies, zoals de App Router en React Server Components.

Hybride Next.js-toepassingen worden gehost met behulp van de wereldwijd gedistribueerde statische inhoudshost en beheerde back-endfuncties van Static Web Apps. Next.js back-endfuncties worden gehost op een toegewezen App Service-exemplaar om volledige functiecompatibiliteit te garanderen.

Met hybride Next.js toepassingen kunnen pagina's en onderdelen dynamisch worden weergegeven, statisch of incrementeel worden gerenderd. Next.js bepaalt automatisch het beste rendering- en cachingmodel op basis van uw gegevens die worden opgehaald voor optimale prestaties.

Belangrijke functies die beschikbaar zijn in de preview zijn:

Volg de zelfstudie voor het implementeren van hybride Next.js-toepassingen voor meer informatie over het implementeren van een hybride Next.js-toepassing in Azure.

Niet-ondersteunde functies in preview

De volgende functies van Static Web Apps worden niet ondersteund voor Next.js met hybride rendering:

  • Selecteer Azure-services: gekoppelde API's met behulp van Azure Functions, Azure-app Service, Azure Container Apps of Azure API Management.
  • SWA CLI-functies: SWA CLI lokale emulatie en implementatie.
  • Ondersteuning voor gedeeltelijke functies: de volgende eigenschappen in staticwebapp.config.json het bestand worden niet ondersteund:
    • Terugval van navigatie wordt niet ondersteund.
    • Route herschrijft naar routes binnen de Next.js toepassing moet worden geconfigureerd binnen next.config.js.
    • De configuratie in het staticwebapp.config.json bestand heeft voorrang op de configuratie binnen next.config.js.
    • De configuratie voor de Next.js-site moet worden verwerkt voor next.config.js volledige functiecompatibiliteit.
  • Build overslaan: voor Next.js toepassingen als skip_api_build=truestatic Web Apps geen dev-afhankelijkheden verwijdert of het scherpe pakket standaard toevoegt. Als u deze optimalisaties wilt, voegt u deze toe aan uw aangepaste buildstappen voordat u deze doorgeeft skip_app_build=true.
  • Incrementele statische regeneratie (ISR): caching van installatiekopieën wordt niet ondersteund.

Notitie

De maximale app-grootte voor de hybride Next.js-toepassing is 250 MB. Gebruik de zelfstandige functie door Next.js voor geoptimaliseerde app-grootten. Als dit niet voldoende is, kunt u overwegen statische HTML-geëxporteerde Next.js te gebruiken als uw app-grootte meer dan 250 MB vereist is.

Rendering aan serverzijde

In de volgende stappen ziet u hoe u een aangepaste back-end koppelt aan uw Standard-abonnement en boven statische web-apps.

Notitie

Gekoppelde back-ends zijn alleen beschikbaar voor sites die gebruikmaken van het Standard-abonnement of hoger.

  1. Ga naar uw statische web-app in Azure Portal.

  2. Selecteer Instellingen en vervolgens API's in het zijmenu.

  3. Selecteer Gekoppelde back-end configureren.

  4. Maak een nieuw App Service-plan of selecteer een bestaand App Service-plan.

    Uw geselecteerde App Service-plan moet ten minste een S1-SKU gebruiken.

  5. Klik op Koppeling.

Statische HTML-export

U kunt een Next.js statische site implementeren met behulp van de functie voor statische HTML-export van Next.js. Met deze configuratie worden statische HTML-bestanden gegenereerd tijdens de build, die in de cache worden opgeslagen en opnieuw worden gebruikt voor alle aanvragen. Bekijk de ondersteunde functies van Next.js statische exports.

Statische Next.js-sites worden gehost op het wereldwijd gedistribueerde Azure Static Web Apps-netwerk voor optimale prestaties. Daarnaast kunt u gekoppelde back-ends toevoegen voor uw API's.

Als u statische export van een Next.js-toepassing wilt inschakelen, voegt u deze toe output: 'export' aan de volgendeconfig in next.config.js.

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

U moet ook de output_location in de GitHub Actions/Azure DevOps-configuratie opgeven. Deze waarde is standaard ingesteld out op basis van Next.js standaardinstellingen. Als een aangepaste uitvoerlocatie wordt aangegeven in de Next.js-configuratie, moet de opgegeven waarde voor de build overeenkomen met de waarde die is geconfigureerd in de export van Next.js.

Als u aangepaste buildscripts gebruikt, stelt u deze in IS_STATIC_EXPORT true de taak Static Web Apps van het GitHub Actions/Azure DevOps YAML-bestand in.

In het volgende voorbeeld ziet u de GitHub Actions-taak die is ingeschakeld voor statische exports.

      - 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

Volg de zelfstudie voor het implementeren van statische Next.js websites voor meer informatie over het implementeren van een statisch geëxporteerde Next.js-toepassing in Azure.