Deploy de aplicação Jamstack com Next

Aprenda como implantar projetos Jamstack usando Next.js na plataforma da Azion com Functions, incluindo etapas de desenvolvimento e implantação.

Ver como Markdown

O Next.js é um framework React flexível que permite a criação de aplicações web full-stack de alto desempenho.

Pré-requisitos

Antes de começar, você deve ter:

Inicializar um projeto Next

  1. No terminal, inicialize o projeto:
azion init
  1. Dê um nome ao seu projeto ou pressione enter para aceitar a sugestão dada:
? Your applications name: (black-thor)
  1. Escolha o preset do Next:
? Choose a preset: [Use arrows to move, type to filter]
Angular
Astro
Docusaurus
Eleventy
Emscripten
Gatsby
Hexo
Hono
Hugo
Javascript
Jekyll
> Next
React
Rustwasm
Svelte
Typescript
Vitepress
Vue

  1. Escolha um dos templates disponíveis.

  2. Uma série de interações acontecerá, responda-as como preferir.

  3. Você pode optar por iniciar um servidor de desenvolvimento local ou não.

? Do you want to start a local development server? (y/N)

Os próximos passos dependem de sua resposta.

Resposta sim para desenvolvimento local

  1. Instale as dependências do projeto. Digite y quando a interação solicitar:
Do you want to install project dependencies? This may be required to start local development server (y/N)

Aguarde até que a instalação seja concluída.

Saída:

Your application was built successfully
[Azion] [Server] › ✔ success Function running on port 0.0.0.0:3333, url: http://localhost:3333
  1. No navegador, vá para http://localhost:3333/ e você verá o seu projeto Next em execução.

Implantação do projeto

Quando o seu projeto está em execução localmente, você ainda pode implantá-lo. Para fazer isso:

  1. Pare a execução no terminal com control + c.
  2. Acesse a pasta do projeto:
cd [nome-do-seu-projeto]
  1. Implante o projeto:
azion deploy
  1. Aguarde enquanto o projeto é construído e implantado na Azion Web Platform.

Uma vez que o deployment é iniciado, a Azion abrirá o navegador e levará o usuário a uma página no Azion Console onde os logs e o processo de implantação podem ser monitorados. Se não abrir automaticamente, basta clicar no link fornecido.

Após a implantação ser concluída, você receberá um Workload para acessar o seu projeto Next na plataforma da Azion.

Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o Workload fornecido, que deve ser semelhante a https://xxxxxxx.map.azionedge.net.

Resposta não para desenvolvimento local

Após indicar que você não deseja executar um servidor local, implante o projeto.

  1. Digite y para a seguinte interação, indicando que deseja implantar o projeto:
Do you want to deploy your project?
  1. Instale as dependências do projeto. Digite y quando a interação solicitar:
Do you want to install project dependencies? This may be required to start local development server (y/N)
  1. Aguarde enquanto o projeto é construído e implantado na plataforma da Azion.

Uma vez que o deployment é iniciado, a Azion abrirá o navegador e levará o usuário a uma página no Azion Console onde os logs e o processo de implantação podem ser monitorados. Se não abrir automaticamente, basta clicar no link fornecido.

Após a implantação ser concluída, você receberá um Workload para acessar o seu projeto Next na Plataforma da Azion.

Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o Workload fornecido, que deve ser semelhante a https://xxxxxxx.map.azionedge.net.

Compatibilidade

saiba mais sobre os Web frameworks suportados saiba mais sobre o suporte ao Node.js saiba mais sobre as Web APIs suportadas