Desenvolva com Next.js

Console

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

CLI

• Uma conta da Azion. Para criar uma, consulte Criar uma conta.
• A Azion CLI, instalada e com login feito. Para configurá-la, consulte Primeiros passos com a Azion CLI.
• Node.js 18 ou posterior, com npm.
• Um terminal e um editor de código.

GitHub

• 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.
• Um repositório do GitHub com um projeto Next.js.

Console

Para fazer o deploy de um template Next.js pelo Azion Console:

Enquanto o build do projeto roda, a página de deploy mostra o Deploy Log. Um deploy bem-sucedido mostra Successfully created!, 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 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.

GitHub

Para fazer o deploy de um projeto Next.js a partir do seu repositório do GitHub:

A página de deploy abre. O título dela é Deploy: seguido do nome da application, e o Deploy Log mostra o build. Um deploy bem-sucedido mostra Successfully created! e a URL do domínio.

O formulário também tem uma seção Variables. Para ela e para todos os outros campos, consulte Importe um projeto do GitHub.