Como criar edge applications com o Next.js Static Boilerplate

O Next.js Static Boilerplate da Azion facilita a criação e implantação de uma Next.js Single-Page Application (SPA) diretamente no edge da rede. Ao executar o boilerplate, várias etapas são automatizadas, desde o gerenciamento de repositório até a implantação da aplicação de uma única página.

Este template usa o Next.js versão 14.1.4.

Sobre static exports

O núcleo do Next.js oferece suporte a exportações estáticas. Isso permite que você inicie seu projeto como um site estático ou uma SPA e, em seguida, adicione recursos que requerem um servidor. Ao usar esses recursos avançados, o Next.js gera um arquivo HTML por rota, dividindo um SPA estrito em arquivos HTML individuais, e seu projeto pode ser implantado e hospedado em qualquer servidor web que possa servir ativos estáticos HTML/CSS/JS.

Esse recurso inclui recursos suportados e não suportados, listados abaixo, que você deve levar em consideração ao desenvolver e gerenciar seu projeto.

Acesse a documentação do Next.js para obter mais detalhes sobre static exports.

Recursos suportados

• Componentes do servidor
• Componentes do cliente
• Otimização de imagem
• Otimização de imagem (através de next/image pode ser usada com uma exportação estática definindo um carregador de imagem personalizado em next.config.js)
• Manipuladores de rota
• APIs do navegador

Recursos não suportados

Esses recursos exigem um servidor Node.js ou uma lógica dinâmica que não pode ser computada durante o processo de compilação e não têm suporte:

• Rotas dinâmicas com dynamicParams: true
• Rotas dinâmicas sem generateStaticParams()
• Manipuladores de rotas que dependem de requisição
• Cookies
• Rewrites
• Redirecionamentos
• Cabeçalhos
• Middleware
• Regeneração estática incremental
• Otimização de imagem (com o loader padrão)
• Modo draft

Pré-requisitos

• Uma conta no GitHub para conectar com a Azion e criar seu novo repositório.
  • Cada push será implantado automaticamente neste repositório para manter seu projeto atualizado.
• Habilitar o Edge Functions na sua conta Azion.
  • Para fazer isso:

1. Acesse o Azion Console > Account menu.
2. Selecione a opção Billing & Subscriptions.
3. Clique na aba Subscriptions.
4. Ative o switch do módulo.

Implante o template

Você pode obter e configurar seu template pelo Azion Console. Para implantá-lo facilmente no edge, clique no botão abaixo.

No formulário de configuração, forneça as informações para configurar sua aplicação. Preencha os campos apresentados.

Os campos identificados com asterisco são obrigatórios.

1. Conecte a Azion com sua conta no GitHub.

• Uma janela pop-up será aberta para confirmar a instalação da Azion GitHub App, uma ferramenta que conecta sua conta do GitHub com a plataforma da Azion.
• Defina suas permissões e acesso ao repositório conforme desejado.

2. Selecione o Git Scope com o qual trabalhar.
3. Defina um nome para sua edge application.

• O bucket para armazenamento e a edge function usarão o mesmo nome.
• Use um nome único e fácil de lembrar. Se o nome já tiver sido usado, a plataforma retornará uma mensagem de erro.

4. Clique no botão Deploy para iniciar o processo de implantação.

Durante a implantação, você poderá acompanhar o processo através de uma janela mostrando os logs. Quando estiver concluída, a página mostra informações sobre a aplicação e algumas opções para continuar sua jornada.

Principais configurações

A aplicação passa por um processo de criação otimizado, enfatizando no melhor desempenho e a eficiência aproveitando os recursos da Azion Edge Platform.

O script cria um repositório do GitHub para gerenciar o código-fonte e, em seguida, instala todas as dependências necessárias. Além disso, sua aplicação é implantada na plataforma da Azion e ao mesmo tempo define múltiplas configurações, como o setup da edge application e do seu domínio para hospedar seu projeto Next.js e uma edge function para lógica personalizada.

O script também confirma os detalhes da implantação no repositório do GitHub do usuário para manter um histórico transparente e rastreável, incluindo informações relacionadas à versão implantada e um registro de data e hora da implantação. O template também inclui uma GitHub Action para habilitar a implantação contínua.

Gerencie o template

Considerando que essa configuração inicial pode não ser ideal para sua aplicação, todas as configurações podem ser personalizadas sempre que você precisar usando o Azion Console.

Para gerenciar e editar as configurações da sua aplicação, siga estas etapas:

1. Acesse o Azion Console.
2. No canto superior esquerdo, selecione Products menu > Edge Application.

• Você será redirecionado para a página de Edge Application. Ela lista todas as edge applications que você criou.

3. Encontre a edge application relacionada ao Next.js Static Boilerplatee e selecione-a.

• A lista é organizada em ordem alfabética. Você também pode usar a barra de busca localizada no canto superior esquerdo da lista; atualmente, ela é filtrada apenas pelo Application Name, ou nome da edge application.

Depois de selecionar a aplicação em que você trabalhará, você será direcionado para uma página que contém todas as configurações que você pode configurar.

Adicione um domínio personalizado

A edge application criada tem um domínio Azion atribuído para torná-la acessível através do navegador. O domínio tem o seguinte formato: xxxxxxxxxx.map.azionedge.net. No entanto, você pode adicionar um domínio personalizado para que os usuários acessem sua aplicação por meio dele.