Desenvolva com Next.js
Crie uma aplicação Next.js a partir de um template da Azion, de um repositório do GitHub ou da Azion CLI, e faça o deploy dela em um domínio da Azion.
Você pode fazer o build de uma aplicação Next.js e o deploy dela na Azion a partir de um template no Azion Console, de um repositório do GitHub ou de um projeto que você cria com a Azion CLI. O resultado é o mesmo em todas as rotas: um domínio da Azion que serve a aplicação.
O build divide uma aplicação Next.js em duas partes. Os assets estáticos vão para um bucket de storage, e uma function executa o restante da aplicação. Uma application encaminha cada requisição para uma das duas, e o Next.js também pode renderizar páginas no servidor. Para as versões e os recursos do Next.js que a Azion suporta, consulte Compatibilidade entre a Azion e o Next.js. Para as APIs que a function pode chamar, consulte Web APIs e Compatibilidade entre o Azion Runtime e Node.js APIs. Para os outros frameworks dos quais a Azion faz o build, consulte Compatibilidade com web frameworks.
Escolha uma rota abaixo. Os pré-requisitos e o procedimento de deploy mudam com ela.
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 Next.js
Cada template é um projeto Next.js completo. A rota do Console faz o deploy de um deles:
| Template | Uso |
|---|---|
| Next JS Static Boilerplate (14.1.4) | Estático/SPA |
| Cosmic - Simple Next.js Blog | Blog |
| Cosmic - Agency Website | Agência/Projeto inicial |
| Space Jelly Shop | E-commerce |
| Nextal - (NextJS, Typescript, Tailwind) | Projeto inicial |
Os templates com link têm um guia próprio. Para mais informações sobre os outros, consulte Marketplace da Azion. Na CLI, o Nextal pertence ao preset OpenNextJS e os outros quatro ao preset Next; o azion init lista os templates de cada preset no seu próprio seletor.
Fazer o deploy da aplicação
Todas as rotas fazem o build do projeto e criam os recursos da Azion que o servem. Siga o painel da sua rota:
Para criar o projeto, execute azion init com um nome. No primeiro seletor, selecione Next. No segundo, selecione um template:
Com -y, o comando instala as dependências. Com --auto, ele não pergunta sobre um servidor de desenvolvimento local nem sobre um deploy. Sem essas opções, ele faz as perguntas que Azion CLI init lista. Com o template Next JS Static Boilerplate (14.1.4), o comando imprime:
Alguns templates pedem um valor de outro serviço antes de instalar as dependências. O Cosmic - Agency Website pergunta Type the Bucket Slug of your Cosmic project, e o template Next.js Multi-tenant Starter Template do preset OpenNextJS pergunta Type your Stack Auth Project ID. Tenha o valor em mãos. Se o init parar nessa pergunta, o projeto fica sem dependências, e o azion build para com Please install dependencies using pnpm.
O projeto fica na pasta my-app. O azion.config.cjs dele define o preset next, envia .edge/next-build-assets para um bucket de storage que os workloads só podem ler e cria uma function a partir de ./functions/handler.js. Duas regras entregam a partir do bucket os caminhos sob /_next/static/ e os tipos de arquivo estáticos, e uma terceira regra executa a function. 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 next e depois adapta a saída dele para a Azion:
Se você selecionou OpenNextJS no seletor de presets, o build passa pelo adaptador @aziontech/opennextjs-azion. O azion.config.cjs desse projeto envia ./.edge/assets para um bucket que os workloads podem ler e gravar e cria a function a partir de ./functions/worker.js. O primeiro build pede para criar um arquivo open-next.config.ts. Execute azion build em um terminal interativo e responda y:
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. Se o navegador não abrir, use a URL da página que o comando imprime. No final, o comando 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 primeiro, consulte Azion CLI dev. Para um projeto Next.js que já existe, execute azion link na pasta dele e selecione o preset next, como descreve Azion CLI link.
Verificar a aplicação
Todas as rotas retornam uma URL para o domínio da Azion da aplicação, no formato https://xxxxxxxxxx.map.azionedge.net. Nas rotas do Console, a página de deploy mostra essa URL. Na rota da CLI, o azion deploy a imprime no final. Abra a URL em um navegador para ver a aplicação Next.js.
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 tem a aplicação responde com uma página 404 que diz There's nothing here yet. Se você receber essa página, aguarde e abra a URL novamente.