Compartilhar via

Implantar sites Next.js híbridos nos Aplicativos Web Estáticos do Azure

  • Artigo

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

Aplicativos Next.js híbridos (versão prévia)

Os Aplicativos Web Estáticos dão suporte à implantação de sites Next.js híbridos. Isso habilita o suporte para todos os recursos Next.js, como o Roteador de Aplicativo e os Componentes do Servidor React.

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

Com aplicativos Next.js híbridos, páginas e componentes podem ser renderizados dinamicamente, renderizados estaticamente ou renderizados incrementalmente. O 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 versão prévia são:

Siga o tutorial para implantar aplicativos Next.js híbridos para saber como implantar um aplicativo Next.js híbrido no Azure.

Recursos sem suporte na versão prévia

Os seguintes recursos dos Aplicativos Web Estáticos não têm suporte para o Next.js com renderização híbrida:

  • Selecionar serviços do Azure: APIs vinculadas usando Azure Functions, Serviço de Aplicativo do Azure, Aplicativos de Contêiner do Azure ou Gerenciamento de API do Azure.
  • Recursos da CLI da SWA: emulação e implantação locais da CLI da SWA.
  • Suporte a recursos parciais: não há suporte para as seguintes propriedades no arquivostaticwebapp.config.json:
    • O fallback de navegação não tem suporte.
    • As reescritas de rota para rotas dentro do aplicativo Next.js devem ser configuradas no next.config.js.
    • A configuração no arquivo staticwebapp.config.json tem precedência sobre a configuração no next.config.js.
    • A configuração do site Next.js deve ser tratada usando next.config.js para a compatibilidade completa do recurso.
  • Ignorar o build: para aplicativos Next.js se skip_api_build=trueos Aplicativos Web Estáticos não removerem dependências de desenvolvimento ou adicionarem o pacote sharp por padrão. Caso queira essas otimizações, adicione-as às etapas de build personalizadas antes de passar skip_app_build=true.
  • Regeneração estática incremental (ISR): não há suporte para cache de imagem.

Observação

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

Renderização do lado do servidor

As etapas a seguir mostram como associar um back-end personalizado ao seu plano Standard e a aplicativos Web estáticos acima.

Observação

Os back-ends vinculados só estão disponíveis para sites usando o plano Standard ou superior.

  1. Vá para o seu aplicativo Web estático no portal do Azure.

  2. Selecione Configurações e, em seguida, APIs no menu lateral.

  3. Selecione Configurar back-end vinculado.

  4. Crie um novo Plano do Serviço de Aplicativo ou selecione um Plano do Serviço de Aplicativo existente.

    O Plano do Serviço de Aplicativo selecionado deve usar pelo menos um SKU S1.

  5. Clique em Vincular.

Exportação de HTML estático

Você pode implantar um site estático Next.js usando o recurso de exportação HTML estático de 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 com suporte de exportações estáticas Next.js.

Sites estáticos Next.js 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 a output_location na configuração do GitHub Actions/Azure DevOps. Por padrão, esse valor é definido como out, de acordo com os padrões de Next.js. Se um local de saída personalizado for indicado na configuração de Next.js, o valor fornecido para o build 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 Aplicativos Web Estáticos do arquivo YAML do GitHub Actions/Azure DevOps.

O exemplo a seguir mostra o trabalho do GitHub Actions 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 para implantar sites Next.js renderizados estáticos para saber como implantar um aplicativo Next.js exportado estaticamente no Azure.