Next.js-webhelyek üzembe helyezése az Azure Static Web Appsben

Next.js Azure Static Web Apps támogatása két üzembehelyezési modellként kategorizálható:

• Hibrid: Hibrid Next.js webhelyek, amelyek támogatják az összes Next.js funkciót, például az alkalmazás útválasztóját, a pages útválasztót és a React Server-összetevőket

• Statikus: Statikus Next.js webhelyek, amelyek a Next.js statikus HTML-exportálási beállítását használják.

Hibrid Next.js-alkalmazások (előzetes verzió)

A Static Web Apps támogatja a hibrid Next.js webhelyek üzembe helyezését. Ez lehetővé teszi az összes Next.js funkció támogatását, például az alkalmazás útválasztóját és a React Server-összetevőket.

A hibrid Next.js-alkalmazások a Static Web Apps globálisan elosztott statikus tartalomgazda és felügyelt háttérfüggvények használatával vannak üzemeltetve. Next.js háttérfüggvények egy dedikált App Service-példányon vannak tárolva a funkciók teljes kompatibilitásának biztosítása érdekében.

Hibrid Next.js alkalmazások esetén a lapok és összetevők dinamikusan renderelhetők, statikusan renderelhetők vagy növekményesen renderelhetők. Next.js automatikusan meghatározza a legjobb renderelési és gyorsítótárazási modellt az adatlekérés alapján az optimális teljesítmény érdekében.

Az előzetes verzióban elérhető főbb funkciók a következők:

• Alkalmazás útválasztója és oldalak útválasztója
• React Server-összetevők
• Hibrid renderelés
• Útvonalkezelők
• Képoptimalizálás
• Internacionalizálás
• Köztes szoftver
• Hitelesítés

Kövesse a hibrid Next.js-alkalmazások üzembe helyezésének oktatóanyagát, amelyből megtudhatja, hogyan helyezhet üzembe hibrid Next.js alkalmazásokat az Azure-ban.

Nem támogatott funkciók előzetes verzióban

A Static Web Apps alábbi funkciói nem támogatottak a hibrid rendereléssel Next.js:

• Válassza ki az Azure-szolgáltatásokat: Társított API-k az Azure Functions, a Azure-alkalmazás Service, az Azure Container Apps vagy az Azure API Management használatával.
• SWA CLI-funkciók: SWA CLI helyi emuláció és üzembe helyezés.
• Részleges funkciók támogatása: A fájl alábbi tulajdonságai staticwebapp.config.json nem támogatottak:
  • A navigációs tartalék nem támogatott.
  • Az átírásokat az Next.js alkalmazáson belüli útvonalakra kell konfigurálni a következőn belül next.config.js: .
  • A fájlon belüli staticwebapp.config.json konfiguráció elsőbbséget élvez a fájlon belüli next.config.jskonfigurációval szemben.
  • A Next.js hely konfigurációját a teljes funkciókompatibilitás érdekében next.config.js kell kezelni.
• Build kihagyása: Ha Next.js alkalmazások skip_api_build=trueesetében a Static Web Apps nem távolítja el a fejlesztői függőségeket, vagy alapértelmezés szerint hozzáadja az éles csomagot. Ha ezeket az optimalizálásokat szeretné, adja hozzá őket az egyéni buildelési lépésekhez, mielőtt továbblép.skip_app_build=true
• Növekményes statikus regeneráció (ISR):: A kép gyorsítótárazása nem támogatott.

Kiszolgálóoldali renderelés

Az alábbi lépések bemutatják, hogyan társíthat egyéni háttérrendszert a Standard csomaghoz és a statikus webalkalmazások fölé.

1. Nyissa meg a statikus webalkalmazást az Azure Portalon.

2. Válassza a Beállítások, majd az API-k lehetőséget az oldalsó menüben.

3. Válassza a Csatolt háttérrendszer konfigurálása lehetőséget.

4. Hozzon létre egy új App Service-csomagot, vagy válasszon ki egy meglévő App Service-csomagot.

   A kiválasztott App Service-csomagnak legalább S1 termékváltozatot kell használnia.

5. Kattintson a Hivatkozás gombra.

Statikus HTML-exportálás

A Next.js statikus HTML-exportálási funkciójával üzembe helyezhet Next.js statikus webhelyet. Ez a konfiguráció statikus HTML-fájlokat hoz létre a buildelés során, amelyeket minden kérés gyorsítótáraz és újra felhasznál. Tekintse meg a statikus exportálások Next.js támogatott funkcióit.

A statikus Next.js webhelyek az Azure Static Web Apps globálisan elosztott hálózatán találhatók az optimális teljesítmény érdekében. Emellett csatolt háttérrendszereket is hozzáadhat az API-khoz.

Ha engedélyezni szeretné egy Next.js alkalmazás statikus exportálását, adja hozzá output: 'export' a következő konfigurációhoz a következőben: next.config.js.

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

Meg kell adnia a output_location GitHub Actions/Azure DevOps konfigurációban is. Alapértelmezés szerint ez az érték Next.js alapértelmezés szerint van beállítva out . Ha egy egyéni kimeneti hely szerepel a Next.js konfigurációban, a buildhez megadott értéknek meg kell egyeznie a Next.js exportálásában konfigurált értékkel.

Ha egyéni buildszkripteket használ, állítsa IS_STATIC_EXPORTtrue a GitHub Actions/Azure DevOps YAML-fájl Statikus webalkalmazások feladatára.

Az alábbi példa a statikus exportálásokhoz engedélyezett GitHub Actions-feladatot mutatja be.

      - 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

Kövesse a statikusan renderelt Next.js webhelyek üzembe helyezésére vonatkozó oktatóanyagot, amelyből megtudhatja, hogyan helyezhet üzembe statikusan exportált Next.js alkalmazásokat az Azure-ban.