Criando uma função na plataforma da Azion usando o framework Next.js

Ao construir uma aplicação moderna, existem algumas questões a serem levadas em consideração, tais como interface, infraestrutura, desempenho, e assim por diante. O framework Next.js¹ é uma estrutura flexível baseada na biblioteca JavaScript React® ² que fornece ferramentas para a construção de aplicações web rápidas.

Visite os sites da biblioteca React e do framework Next.js para maiores informações.

Por que usar o Next.js?

O framework Next.js oferece a estrutura adicional, características, e otimizações necessárias para a sua aplicação. Além disso, permite integrar uma ampla variedade de ferramentas e soluções de terceiros.

Como funciona o Next.js?

O framework Next.js pré-renderiza cada página por padrão, o que significa que o HTML é gerado antecipadamente em um servidor. Esse processo libera o dispositivo do usuário de renderizar toda a página usando a linguagem de programação JavaScript³.

Veja como instalar, configurar, e publicar uma aplicação web na Azion usando o framework Next.js:

Pré-requisitos

Instalar o Node.js

Iniciar um projeto Next.js

Configurar uma aplicação Next.js na Azion

Publicar uma aplicação Next.js na Azion

1. Pré-requisitos

Para criar uma aplicação web na plataforma da Azion com o framework Next.js, você precisa de:

Um bucket Amazon S3⁴ na Amazon Web Services⁴ (AWS) com permissões de gravação e leitura.
Uma conta na plataforma da Azion com Edge Functions habilitadas.
O Node.js⁵ runtime environment, versão 16.x ou superior, instalado em ambiente de compilação build.
A versão mais recente da Azion CLI instalada.
Um projeto do framework Next.js com Static HTML Export.

Para instalar a Azion CLI, visite a página da sua documentação de referência.

Nota: atualmente, apenas esses casos de uso do framework Next.js são suportados.

2. Instalar o Node.js

Você pode baixar o Node.js no site oficial ou com a ferramenta Node Version Manager (NVM). Após baixar o arquivo, instale o Node.js runtime environment no seu computador seguindo as instruções contidas no site.

Visite o projeto open-source do NVM no repositório NVM para maiores informações.

Nota: certifique-se de utilizar a versão versão 16.x ou superior do Node.js. Você também precisa ter permissão para instalar pacotes globais com o gerenciador de pacotes npm do Node.js no seu sistema operacional.

3. Iniciar um projeto Next.js

Certifique-se de que todas as dependências do seu projeto Next.js estão instaladas e que ele está compilado estaticamente.

Visite a documentação de referência para obter mais detalhes sobre como criar um novo projeto com o framework Next.js.

Para iniciar, faça o clone do seu projeto Git® ⁶ ou use o comando Create Next App para iniciar um projeto usando um template:

npx create-next-app nextjs-azion --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Visite o site oficial do Git version control system e consulte a sua documentação de suporte para maiores informações.

Entre no diretório da aplicação e siga os passos do próximo tópico.

Dica: a pasta contendo o projeto Next.js pode estar localizada em qualquer local de sua preferência, e será a pasta da sua aplicação web usando o framework Next.js.

Você deve executar os próximos comandos sempre no diretório da sua aplicação web com o projeto do framework Next.js.

4. Configurar uma aplicação Next.js na Azion

Para configurar e publicar uma aplicação web com o framework Next.js na plataforma da Azion, siga os seguintes passos:

Crie um Personal Token no Real-Time Manager (RTM).

Nota: você poderá utilizar um Personal Token já existente na plataforma da Azion. Caso necessite criar um novo, acesse Account Menu > Personal Tokens ou acesse a documentação de referência para maiores informações.
Configure um Personal Token para uso pela CLI com o comando:

azioncli configure --token azionxxxxxxxxxxx

Esse comando configura o seu Personal Token para uso com os comandos da CLI. Um token é uma sequência aleatória de caracteres com o formato azionxxxxxxxxxxx.
Execute o comando a seguir dentro da pasta da aplicação:

azioncli webapp init --name "nextjs-azion" --type nextjs

Esse comando instala todas as bibliotecas e recursos necessários para executar o framework Next.js na plataforma da Azion. Além disso, ele cria um diretório chamado azion na pasta da aplicação web.

Para verificar a criação da pasta azion, execute o comando ls.
Abra o arquivo kv.json para edição com o comando a seguir:

nano kv.json

A resposta do comando é um arquivo JSON com conteúdo semelhante ao apresentado abaixo:
```
 {
   "kv": {
     "bucket": "azion-nextjs",
     "region": "us-east-1",
     "path": "__static_content"
 }
```
Visite o site do formato JSON para maiores informações.
Edite o arquivo alterando as chaves bucket, region e path de acordo com as configurações do seu bucket Amazon S3.
Salve o arquivo pressionando CTRL + o e ENTER ou RETURN.
Retorne ao terminal pressionado as teclas CTRL + x.
Certifique-se de ter instalado todas as dependências locais do projeto com os comandos npm install ou yarn install.
Configure o seu KV Storage.

Cuidado: certifique-se de não versionar suas credenciais diretamente nos seus arquivos por razões de segurança. Você pode usar o recurso VCS SECRETS do seu versionador de software para essa finalidade.

Execute o seguinte comando:

azioncli webapp build Resposta da CLI:

  Please inform your AWS credentials below:

  AWS_ACCESS_KEY_ID:  [enter-your-access-key-id]
  AWS_SECRET_ACCESS_KEY:  [enter-your-secret-access-key-id]

  Building your Web Application

A CLI construirá a sua aplicação.

Nota: no momento, apenas os casos de uso de Static HTML Export Next.js são compatíveis.

5. Publicar uma aplicação Next.js na Azion

Depois de construir a sua aplicação web usando o framework Next.js, o próximo passo é publicá-la no RTM.

Para publicar a sua aplicação web, siga os seguintes passos:

Execute o comando:

azioncli webapp publish

Resposta da CLI:

   Building your Web Application
   Your Web Application was built successfully

   Created Edge Function nextjs-azion with ID 0000
   Created Edge Application nextjs-azion with ID 098098908
   Created Domain nextjs-azion with ID 8098098098
   Your Web Application was published successfully

   To visualize your application access the domain: xxxxxx.map.azionedge.net
    
   Content is being propagated to all Azion POPs and it might take a few minutes for all edges to be up to date

Nota: a publicação de uma aplicação Web pelo RTM ou pela CLI não é um processo instantâneo. Existe um tempo de propagação e configuração da aplicação nas edge locations da Azion. Pode ser necessário aguardar alguns minutos para a ativação da URL e a efetiva visualização da aplicação no navegador.

Acesse seu aplicativo web através da URL <edge_application_id>.map.azionedge.net

Pronto! Sua aplicação web utilizando o framework Next.js já está disponível na plataforma da Azion!

Para verificar o endereço do domínio recém-criado, acesse Products Menu > Domains no site da Azion. Outras configurações criadas pela publicação também podem ser visualizadas no Real-Time Manager.

Trademarks

Next.js é marca registrada da Vercel, Inc. nos EUA.
React é marca registrada da Meta Platforms, Inc. nos EUA.
JavaScript é marca registrada da Oracle America, Inc. nos EUA.
Amazon Web Services, AWS, e Amazon Simple Storage Service (Amazon S3) são marcas comerciais da Amazon.com, Inc. ou de suas afiliadas.
Node.js é uma marca registrada da OpenJS Foundation® nos EUA e/ou em outros países.
Git e o logotipo Git são marcas registradas ou marcas comerciais da Software Freedom Conservancy, Inc., sede corporativa do Git Project, nos Estados Unidos e/ou em outros países.

Não encontrou o que procurava? Abra um ticket.