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
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:
-
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 comandols
. -
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
epath
de acordo com as configurações do seu bucket Amazon S3. -
Salve o arquivo pressionando
CTRL + o
eENTER
ouRETURN
. -
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
ouyarn 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.
Todos os direitos reservados.
Não encontrou o que procurava? Abra um ticket.