Udostępnij za pośrednictwem

Wdrażanie witryn internetowych Next.js w usłudze Azure Static Web Apps

  • Artykuł

Next.js obsługę usługi Azure Static Web Apps można podzielić na dwa modele wdrażania:

Aplikacje Next.js hybrydowe (wersja zapoznawcza)

Usługa Static Web Apps obsługuje wdrażanie witryn internetowych Next.js hybrydowych. Umożliwia to obsługę wszystkich funkcji Next.js, takich jak router aplikacji i składniki serwera React.

Hybrydowe aplikacje Next.js są hostowane przy użyciu globalnie rozproszonego hosta zawartości statycznej usługi Static Web Apps i zarządzanych funkcji zaplecza. Next.js funkcje zaplecza są hostowane w dedykowanym wystąpieniu usługi App Service, aby zapewnić pełną zgodność funkcji.

W przypadku aplikacji Next.js hybrydowych strony i składniki mogą być dynamicznie renderowane, renderowane statycznie lub przyrostowo renderowane. Next.js automatycznie określa najlepszy model renderowania i buforowania na podstawie pobierania danych w celu uzyskania optymalnej wydajności.

Najważniejsze funkcje dostępne w wersji zapoznawczej to:

Postępuj zgodnie z samouczkiem dotyczącym wdrażania aplikacji Next.js hybrydowych , aby dowiedzieć się, jak wdrożyć aplikację Next.js hybrydową na platformie Azure.

Nieobsługiwane funkcje w wersji zapoznawczej

Następujące funkcje usługi Static Web Apps nie są obsługiwane w przypadku Next.js z renderowaniem hybrydowym:

  • Wybierz pozycję Usługi platformy Azure: połączone interfejsy API przy użyciu usługi Azure Functions, usługi aplikacja systemu Azure, usługi Azure Container Apps lub usługi Azure API Management.
  • Funkcje interfejsu wiersza polecenia swa: lokalne emulacja i wdrażanie interfejsu wiersza polecenia swa.
  • Obsługa funkcji częściowych: następujące właściwości w staticwebapp.config.json pliku nie są obsługiwane:
    • Powrót nawigacji jest nieobsługiwany.
    • Trasa ponownie zapisuje trasy do tras w aplikacji Next.js musi być skonfigurowana w programie next.config.js.
    • Konfiguracja w staticwebapp.config.json pliku ma pierwszeństwo przed konfiguracją w programie next.config.js.
    • Konfiguracja witryny Next.js powinna być obsługiwana przy użyciu w next.config.js celu zapewnienia pełnej zgodności funkcji.
  • Pomijanie kompilacji: w przypadku aplikacji Next.js, jeśli skip_api_build=trueusługa Static Web Apps nie usuwa zależności deweloperskich lub domyślnie dodaje ostry pakiet. Jeśli chcesz, aby te optymalizacje były dodawane do niestandardowych kroków kompilacji przed przekazaniem skip_app_build=truepolecenia .
  • Regeneracja statyczna przyrostowa (ISR): buforowanie obrazów nie jest obsługiwane.

Uwaga

Maksymalny rozmiar aplikacji dla aplikacji hybrydowej Next.js wynosi 250 MB. Używanie funkcji autonomicznej przez Next.js dla zoptymalizowanych rozmiarów aplikacji. Jeśli nie jest to wystarczające, rozważ użycie wyeksportowanego Next.js statycznego kodu HTML, jeśli wymaganie dotyczące rozmiaru aplikacji przekracza 250 MB.

Renderowanie po stronie serwera

W poniższych krokach pokazano, jak skojarzyć niestandardowe zaplecze z planem w warstwie Standardowa i powyżej statycznych aplikacji internetowych.

Uwaga

Połączone zaplecza są dostępne tylko dla witryn korzystających z planu standardowego lub nowszego.

  1. Przejdź do statycznej aplikacji internetowej w witrynie Azure Portal.

  2. Wybierz pozycję Ustawienia , a następnie interfejsy API z menu bocznego.

  3. Wybierz pozycję Konfiguruj połączone zaplecze.

  4. Utwórz nowy plan usługi App Service lub wybierz istniejący plan usługi App Service.

    Wybrany plan usługi App Service musi używać co najmniej jednostki SKU S1 .

  5. Kliknij pozycję Łącze.

Statyczny eksport HTML

Możesz wdrożyć Next.js statyczną witrynę przy użyciu funkcji statycznego eksportu HTML Next.js. Ta konfiguracja generuje statyczne pliki HTML podczas kompilacji, które są buforowane i ponownie używane dla wszystkich żądań. Zobacz obsługiwane funkcje Next.js eksportów statycznych.

Statyczne witryny Next.js są hostowane w globalnie rozproszonej sieci azure Static Web Apps w celu uzyskania optymalnej wydajności. Ponadto możesz dodać połączone zaplecza dla interfejsów API.

Aby włączyć statyczny eksport aplikacji Next.js, dodaj output: 'export' element do następnej konfiguracji w pliku next.config.js.

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

Należy również określić element output_location w konfiguracji funkcji GitHub Actions/Azure DevOps. Domyślnie ta wartość jest ustawiona na out wartość zgodnie z Next.js wartościami domyślnymi. Jeśli w konfiguracji Next.js wskazana jest niestandardowa lokalizacja wyjściowa, wartość podana dla kompilacji powinna być zgodna z lokalizacją skonfigurowaną w eksporcie Next.js.

Jeśli używasz niestandardowych skryptów kompilacji, ustaw IS_STATIC_EXPORT wartość na true w zadaniu Static Web Apps pliku YAML funkcji GitHub Actions/Azure DevOps.

W poniższym przykładzie pokazano zadanie funkcji GitHub Actions, które jest włączone dla eksportów statycznych.

      - 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

Postępuj zgodnie z samouczkiem dotyczącym wdrażania statycznie renderowanych Next.js witryn internetowych , aby dowiedzieć się, jak wdrożyć statycznie wyeksportowaną aplikację Next.js na platformie Azure.