1 of 20
2 of 20
3 of 20
4 of 20
5 of 20
6 of 20
7 of 20
8 of 20
9 of 20
10 of 20
11 of 20
12 of 20
13 of 20
14 of 20
15 of 20
16 of 20
17 of 20
18 of 20
19 of 20
20 of 20

doc

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.js1 é uma estrutura flexível baseada na biblioteca JavaScript React® 2 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 JavaScript3.

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

  1. Pré-requisitos
  2. Instalar o Node.js
  3. Iniciar um projeto Next.js
  4. Configurar uma aplicação Next.js na Azion
  5. 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 S34 na Amazon Web Services4 (AWS) com permissões de gravação e leitura.
  • Uma conta na plataforma da Azion com Edge Functions habilitadas.
  • O Node.js5 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® 6 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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. Edite o arquivo alterando as chaves bucket, region e path de acordo com as configurações do seu bucket Amazon S3.

  6. Salve o arquivo pressionando CTRL + o e ENTER ou RETURN.

  7. Retorne ao terminal pressionado as teclas CTRL + x.

  8. Certifique-se de ter instalado todas as dependências locais do projeto com os comandos npm install ou yarn install.

  9. 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.

  1. 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:

  1. 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.

  1. 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

  1. Next.js é marca registrada da Vercel, Inc. nos EUA.
  2. React é marca registrada da Meta Platforms, Inc. nos EUA.
  3. JavaScript é marca registrada da Oracle America, Inc. nos EUA.
  4. Amazon Web Services, AWS, e Amazon Simple Storage Service (Amazon S3) são marcas comerciais da Amazon.com, Inc. ou de suas afiliadas.
  5. Node.js é uma marca registrada da OpenJS Foundation® nos EUA e/ou em outros países.
  6. 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.

Todos os direitos reservados.


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