Sdílet prostřednictvím

Nasazení webů Next.js ve službě Azure Static Web Apps

  • Článek

Next.js podporu azure Static Web Apps je možné kategorizovat jako dva modely nasazení:

Hybridní Next.js aplikace (Preview)

Static Web Apps podporuje nasazení hybridních Next.js webů. To umožňuje podporu všech funkcí Next.js, jako je směrovač aplikací a komponenty serveru React.

Hybridní Next.js aplikace jsou hostované pomocí globálně distribuovaného hostitele statického obsahu Static Web Apps a spravovaných back-endových funkcí. Next.js back-endové funkce jsou hostované ve vyhrazené instanci služby App Service, aby se zajistila úplná kompatibilita funkcí.

Díky hybridním Next.js aplikacím je možné dynamicky vykreslit stránky a komponenty, staticky vykreslit nebo přírůstkově vykreslit. Next.js automaticky určí nejlepší model vykreslování a ukládání do mezipaměti na základě načítání dat pro optimální výkon.

Mezi klíčové funkce, které jsou k dispozici ve verzi Preview, patří:

V kurzu nasazení hybridních Next.js aplikací se dozvíte, jak nasadit hybridní Next.js aplikaci do Azure.

Nepodporované funkce ve verzi Preview

Pro Next.js s hybridním vykreslováním se nepodporují následující funkce Static Web Apps:

  • Výběr služeb Azure: Propojená rozhraní API pomocí Azure Functions, Aplikace Azure Service, Azure Container Apps nebo Azure API Management.
  • Funkce rozhraní příkazového řádku SWA: Místní emulace a nasazení rozhraní příkazového řádku SWA
  • Podpora částečných funkcí: Následující vlastnosti v staticwebapp.config.json souboru nejsou podporované:
    • Záložní navigace není podporována.
    • Směrování přepisuje trasy v rámci Next.js aplikace musí být nakonfigurované v rámci next.config.js.
    • Konfigurace v souboru staticwebapp.config.json má přednost před konfigurací v rámci next.config.jssouboru .
    • Konfigurace pro Next.js lokalitu by měla být zpracována pomocí next.config.js úplné kompatibility funkcí.
  • Přeskočení sestavení: Pro Next.js aplikace, pokud skip_api_build=truestatické webové aplikace neodeberou vývojové závislosti nebo ve výchozím nastavení nepřidají ostrý balíček. Pokud chcete tyto optimalizace, před předáním skip_app_build=trueje přidejte do vlastních kroků sestavení .
  • Přírůstková statická regenerace (ISR): Ukládání obrázků do mezipaměti se nepodporuje.

Poznámka:

Maximální velikost aplikace pro hybridní Next.js aplikace je 250 MB. Pro optimalizované velikosti aplikací používejte samostatnou funkci Next.js. Pokud to nestačí, zvažte použití statického HTML exportovaného Next.js , pokud je váš požadavek na velikost aplikace větší než 250 MB.

Vykreslování na straně serveru

Následující kroky ukazují, jak přidružit vlastní back-end k plánu Standard a nad statickými webovými aplikacemi.

Poznámka:

Propojené back-endy jsou dostupné jenom pro weby používající plán Standard nebo vyšší.

  1. Na webu Azure Portal přejděte do své statické webové aplikace.

  2. V boční nabídce vyberte Nastavení a pak rozhraní API.

  3. Vyberte Konfigurovat propojený back-end.

  4. Vytvořte nový plán služby App Service nebo vyberte existující plán služby App Service.

    Vybraný plán služby App Service musí používat aspoň skladovou položku S1 .

  5. Klikněte na Odkaz.

Statický export HTML

Statický web Next.js můžete nasadit pomocí funkce statického exportu HTML Next.js. Tato konfigurace generuje statické soubory HTML během sestavení, které jsou uloženy v mezipaměti a opakovaně použity pro všechny požadavky. Podívejte se na podporované funkce Next.js statických exportů.

Statické Next.js weby jsou hostované v globálně distribuované síti Azure Static Web Apps pro zajištění optimálního výkonu. Kromě toho můžete pro svá rozhraní API přidat propojené back-endy.

Pokud chcete povolit statický export Next.js aplikace, přidejte output: 'export' do příkazu nextConfig v next.config.jssouboru .

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

Musíte také zadat output_location v konfiguraci GitHub Actions nebo Azure DevOps. Ve výchozím nastavení je tato hodnota nastavená na out Next.js výchozí hodnoty. Pokud je v konfiguraci Next.js uvedeno vlastní umístění výstupu, měla by hodnota zadaná pro sestavení odpovídat hodnotě nakonfigurované v exportu Next.js.

Pokud používáte vlastní skripty sestavení, nastavte v true úloze IS_STATIC_EXPORT Static Web Apps souboru YAML GitHub Actions nebo Azure DevOps.

Následující příklad ukazuje úlohu GitHub Actions, která je povolená pro statické exporty.

      - 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

V kurzu nasazení statického vykresleného Next.js webů se dozvíte, jak nasadit staticky exportovanou Next.js aplikaci do Azure.