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

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

• Híbrido: Sites Next.js híbridos, que incluem suporte para todos os recursos Next.js, como o App Router, o Pages Router e os componentes do React Server

• Estático: Sites Next.js estáticos, que usam a opção Exportação HTML estática do Next.js.

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:

• Roteador de aplicativos e roteador de páginas
• Componentes do React Server
• Renderização híbrida
• Manipuladores de rota
• Otimização de imagem
• Internacionalização
• Middleware
• Autenticaçã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:

• Selecione Serviços do Azure: 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.
• Recursos da SWA CLI: emulação e implantação local da SWA CLI.
• Suporte parcial a recursos: As seguintes propriedades no staticwebapp.config.json arquivo não são suportadas:
  • 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.
• Ignorar compilação: para aplicativos Next.js se skip_api_build=true, Static Web Apps não remove dependências de desenvolvimento ou adiciona o pacote dinâmico por padrão. Se você quiser essas otimizações, adicione-as às suas etapas de compilação personalizadas antes de passar skip_app_build=trueo .
• Regeneração estática incremental (ISR): o cache de imagem não é suportado.

Renderização do lado do servidor

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

1. Aceda à sua aplicação Web estática 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 uma SKU S1 .

5. Clique em Link.

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.