Implantar sites Next.js em Aplicativos Web Estáticos do Azure

  • Artigo

Next.js suporte em Aplicativos Web Estáticos do Azure pode ser categorizado como dois modelos de implantação:

Aplicações Next.js híbridas (pré-visualização)

O Static Web Apps suporta a implantação de sites Next.js híbridos. Isso permite o suporte para todos os recursos Next.js, como o App Router e os componentes do React Server.

Os aplicativos Next.js híbridos são hospedados usando os aplicativos Web estáticos, o host de conteúdo estático distribuído globalmente e as funções de back-end gerenciadas. Next.js funções de back-end são hospedadas em uma instância dedicada do Serviço de Aplicativo para garantir total compatibilidade de recursos.

Com aplicativos Next.js híbridos, páginas e componentes podem ser renderizados dinamicamente, renderizados estaticamente ou incrementalmente. Next.js determina automaticamente o melhor modelo de renderização e cache com base na busca de dados para um desempenho ideal.

Os principais recursos disponíveis na visualização são:

Siga o tutorial deploy hybrid Next.js applications para saber como implantar um aplicativo Next.js híbrido no Azure.

Funcionalidades não suportadas na pré-visualização

Os seguintes recursos de aplicativos Web estáticos não são suportados para Next.js com renderização híbrida:

  • APIs vinculadas usando o Azure Functions, o Serviço de Aplicativo do Azure, os Aplicativos de Contêiner do Azure ou o Gerenciamento de API do Azure.
  • Emulação e implantação local da CLI SWA.
  • Suporte parcial para staticwebapp.config.json arquivo.
    • Não há suporte para fallback de navegação.
    • As regravações de rota em rotas dentro do aplicativo Next.js devem ser configuradas em next.config.js.
    • A configuração dentro do staticwebapp.config.json arquivo tem precedência sobre a configuração dentro next.config.jsdo .
    • A configuração para o site Next.js deve ser tratada usando next.config.js para compatibilidade total de recursos.
  • skip_app_build e skip_api_build não pode ser usado na imagem de Azure/static-web-apps-deploy@v1 implantação.
  • A regeneração estática incremental (ISR) não suporta imagens em cache.

Nota

O tamanho máximo do aplicativo para o aplicativo Next.js híbrido é de 250 MB. Use o recurso autônomo por Next.js para tamanhos de aplicativos otimizados. Se isso não for suficiente, considere usar HTML estático exportado Next.js se o requisito de tamanho do aplicativo for superior a 250 MB.

Exportação HTML estática

Você pode implantar um site estático Next.js usando o recurso de exportação HTML estático do Next.js. Essa configuração gera arquivos HTML estáticos durante a compilação, que são armazenados em cache e reutilizados para todas as solicitações. Consulte os recursos suportados do Next.js exportações estáticas.

Os sites de Next.js estática são hospedados na rede distribuída globalmente dos Aplicativos Web Estáticos do Azure para um desempenho ideal. Além disso, você pode adicionar back-ends vinculados para suas APIs.

Para habilitar a exportação estática de um aplicativo Next.js, adicione output: 'export' ao nextConfig em next.config.js.

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

Você também deve especificar o output_location na configuração GitHub Actions/Azure DevOps. Por padrão, esse valor é definido como out por Next.js padrões. Se um local de saída personalizado for indicado na configuração Next.js, o valor fornecido para a compilação deverá corresponder ao configurado na exportação de Next.js.

Se você estiver usando scripts de compilação personalizados, defina IS_STATIC_EXPORT como true na tarefa Static Web Apps do arquivo YAML GitHub Actions/Azure DevOps.

O exemplo a seguir mostra o trabalho Ações do GitHub habilitado para exportações estáticas.

      - 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

Siga o tutorial deploy static-rendered Next.js websites para saber como implantar um aplicativo Next.js exportado estaticamente no Azure.