--- name: azion-desenvolva-com-nextal description: >- 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. --- # Desenvolva com Nextal 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](/pt-br/documentacao/devtools/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](/pt-br/documentacao/plataforma/functions/). A [application](/pt-br/documentacao/plataforma/applications/) 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](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-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](/pt-br/documentacao/fundamentos/criar-uma-conta/). **Console** - Acesso ao Azion Console. Para entrar, consulte [Como acessar o Azion Console](/pt-br/documentacao/guias/plataforma/conta-e-billing/como-acessar-o-azion-console/). - Uma conta do GitHub. O formulário do template a conecta quando pede por ela. **CLI** - A Azion CLI instalada e com login feito. Para configurá-la, consulte [Primeiros passos com a Azion CLI](/pt-br/documentacao/devtools/cli/primeiros-passos/). - Node.js 18 ou posterior, e npm. - Um terminal e um editor de código. --- ## 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](https://github.com/aziontech/azion-samples/tree/dev/templates/opennextjs/nextal-next-typescript-tailwind). 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](/pt-br/documentacao/plataforma/marketplace/). 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: **Console** Para fazer o deploy do template Nextal pelo Azion Console: 1. **Abra os templates** Acesse [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Busque o Nextal** Em **Search by name, framework, or keyword**, digite `Nextal`. 3. **Selecione o template Nextal** 4. **Conecte sua conta do GitHub** Se o formulário mostrar **GitHub Connection**, selecione **Connect with GitHub** e instale o [Azion GitHub App](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/azion-github-app/). 5. **Selecione um Git Scope** Em **Git Scope**, selecione o escopo onde o repositório do template vai ficar. 6. **Preencha as configurações que o template pede** 7. **Selecione Deploy** A página de deploy abre, e o **Deploy Log** acompanha o build. Depois de um deploy bem-sucedido, aparece **Successfully created!**. A página então mostra a URL do domínio e um botão **Manage** que abre a application. **CLI** Para criar o projeto, execute `azion init` com um nome. No primeiro seletor, selecione *OpenNextJS*. No segundo seletor, selecione *Nextal - (NextJS, Typescript, Tailwind)*: ```bash azion init --name my-app --auto -y ``` 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](/pt-br/documentacao/devtools/cli/init/) lista. Os dois seletores mostram estas entradas: ```text ? Choose a preset: [Use arrows to move, type to filter] > AI Studio Angular Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript Jekyll Next Nuxt OpenNextJS Preact Qwik React Rustwasm Stencil Svelte Typescript Vitepress Vue Vuepress ? Choose a preset: OpenNextJS ? Choose a template: [Use arrows to move, type to filter] > Next.js Multi-tenant Starter Template Nextal - (NextJS, Typescript, Tailwind) Next.js AI Chatbot Next.js Boilerplate Next.js Commerce with Shopify Next.js Live Transcription Next.js Multi-Tenant Paint by Text ``` 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](/pt-br/documentacao/devtools/cli/azion-config-js/). Para fazer o build da aplicação, entre na pasta do projeto e execute `azion build`: ```bash cd my-app 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: ```bash azion deploy ``` 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](/pt-br/documentacao/devtools/cli/deploy/). Para executar a aplicação na sua máquina antes do deploy, consulte [Azion CLI dev](/pt-br/documentacao/devtools/cli/dev-comando/). 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](/pt-br/documentacao/devtools/cli/link-comando/). --- ## 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. --- ## Próximos passos - [Versões do Next.js](/pt-br/documentacao/devtools/runtime/frameworks/nextjs-compatibility.md): Confira quais versões e recursos do Next.js rodam na Azion. - [Desenvolva com Next.js](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/next.md): Faça o deploy de um projeto Next.js que não parte do Nextal. - [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy.md): Leia a saída do deploy e as flags que mudam um deploy. - [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js.md): Altere o bucket, o cache e as regras que o preset OpenNextJS gera.