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 dentronext.config.js
do . - 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 passarskip_app_build=true
o . - Regeneração estática incremental (ISR): o cache de imagem não é suportado.
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.
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.
Nota
Os back-ends vinculados só estão disponíveis para sites que usam o plano Standard ou superior.
Aceda à sua aplicação Web estática no portal do Azure.
Selecione Configurações e, em seguida, APIs no menu lateral.
Selecione Configurar back-end vinculado.
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 .
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.