Desenvolva com Nextal
Crie uma aplicação Nextal a partir de um template da Azion ou com a Azion CLI, e faça o deploy dela em um domínio da Azion.
Você pode fazer o deploy de uma aplicação Nextal na Azion a partir de um template no Azion Console ou com a Azion CLI. Com qualquer uma das rotas, a aplicação termina em execução na Azion e responde em um domínio da Azion.
A Azion executa o Nextal como uma aplicação renderizada no servidor por meio do preset OpenNextJS, opennextjs. O build grava os assets estáticos em .edge/assets e um worker em .edge/functions/worker.js. O deploy envia os assets para um bucket de storage e executa o worker como uma function. A application serve /_next/static/ e os arquivos estáticos a partir do bucket, e executa a function para todas as outras requisições. Para os outros frameworks dos quais a Azion faz o build, consulte Compatibilidade com web frameworks.
Escolha como você vai fazer o deploy. Os pré-requisitos e as etapas de deploy abaixo mudam com essa escolha.
Pré-requisitos
- Uma conta da Azion. Para criar uma, consulte Criar uma conta.
- Acesso ao Azion Console. Para entrar, consulte Como acessar o Azion Console.
- Uma conta do GitHub. O formulário do template a conecta quando pede por ela.
Templates do Nextal
O Nextal é um template inicial de Next.js que inclui TypeScript, Tailwind CSS e Hero Icons. Ele organiza as pastas segundo o Atomic Design e suporta modo escuro e imports absolutos. O código-fonte dele está no repositório azion-samples.
A rota do Console faz o deploy deste template:
| Template | Uso |
|---|---|
| Nextal | Projeto inicial |
Para mais informações sobre outros templates, consulte Marketplace da Azion. Na rota da CLI, o azion init lista o Nextal entre os templates do preset OpenNextJS.
Fazer o deploy da aplicação
Todas as rotas fazem o build do projeto Nextal e criam os recursos que o executam na Azion. Siga o painel da rota que você escolheu:
Para criar o projeto, execute azion init com um nome. No primeiro seletor, selecione OpenNextJS. No segundo seletor, selecione Nextal - (NextJS, Typescript, Tailwind):
A opção -y instala as dependências. A opção --auto pula as perguntas sobre um servidor de desenvolvimento local e sobre um deploy. Sem essas opções, o comando faz as perguntas que Azion CLI init lista. Os dois seletores mostram estas entradas:
Depois da seleção, o comando busca o template e instala as dependências dele. Ele termina com Your application my-app was initialized successfully. O projeto fica em uma pasta my-app, e o arquivo azion.config dele define o preset opennextjs. Para todas as configurações desse arquivo, consulte azion.config.js.
Para fazer o build da aplicação, entre na pasta do projeto e execute azion build:
O comando executa o build do Next.js pelo Azion Bundler com o preset opennextjs e termina com Your Application was built successfully. O build precisa das dependências que o azion init instala; sem elas, ele para com Please install dependencies using pnpm.
Se o projeto não tiver um arquivo open-next.config.ts, o build pergunta Missing required `open-next.config.ts` file, do you want to create one? (Y/n). Execute o build em um terminal interativo e responda y. O build cria o arquivo e continua.
Para fazer o deploy da aplicação, execute azion deploy na pasta do projeto:
O comando envia o projeto e abre a página do Console que acompanha o deploy. Ele também imprime a URL dessa página caso o navegador não abra. No final, ele imprime a URL do domínio da aplicação. Para a saída completa e todas as flags, consulte Azion CLI deploy.
Para executar a aplicação na sua máquina antes do deploy, consulte Azion CLI dev. Para fazer o deploy de um projeto Nextal que já existe, execute azion link na pasta dele e selecione o preset OpenNextJS, como descreve Azion CLI link.
Verificar o site
O deploy retorna a URL do domínio da Azion da aplicação, no formato https://xxxxxxxxxx.map.azionedge.net. O Azion Console mostra essa URL na página de deploy, e o azion deploy a imprime no final. Abra a URL em um navegador para ver a aplicação Nextal.
O primeiro deploy pode levar vários minutos para responder em todas as localidades; os deploys seguintes levam cerca de dois minutos. Uma localidade que ainda não recebeu a aplicação responde com uma página 404 que diz There's nothing here yet. Se você receber essa página, aguarde e solicite a URL novamente.