ContatoSign in

Compatibilidade de Frameworks| Next.js

Sobre Next.js

Next.js é um framework poderoso para construir aplicações web rápidas, escaláveis e modernas. Ele oferece suporte à geração de sites estáticos, renderização do lado do servidor, rotas de API e muito mais, tornando-se uma escolha popular para sites estáticos e dinâmicos. O Next.js possui um sistema de roteamento flexível baseado em arquivos, otimização de imagens integrada e um ecossistema rico de plugins.

Principais funcionalidades:

  • Renderização híbrida estática e do lado do servidor.
  • Roteamento baseado no sistema de arquivos.
  • Rotas de API para lógica de backend.
  • Otimização de imagens integrada.
  • Regeneração estática incremental.
  • Suporte ao TypeScript.
  • Ecossistema rico de plugins e middlewares.
  • Forte comunidade e suporte empresarial.

O Next.js também permite a Renderização do Lado do Servidor (SSR) na Azion Web Platform. Para mais informações sobre a compatibilidade do Next.js, clique aqui

Templates disponíveis

Nome do templateCaso de usoDetalhes
Next.js Static BoilerplateSite estáticoMais detalhes
Next.js Store Ecommerce TemplateE-commerceMais detalhes
Next.js App MiddlewareExemplo de MiddlewareMais detalhes
Next.js App ConfigurationsExemplo de ConfiguraçãoMais detalhes
Next.js Pages ConfigurationsExemplo de ConfiguraçãoMais detalhes
Next.js Pages MiddlewareExemplo de MiddlewareMais detalhes
Kupingplug StoreE-commerceMais detalhes
Next.js Stationary StoreE-commerceMais detalhes
Cosmic Next BlogBlogMais detalhes
Cosmic AgencyE-commerceMais detalhes
Space Jelly ShopE-commerceMais detalhes

Realizando deploy de um template no Azion Console

  1. Faça login no Console.
  2. Clique no botão + Create.
  3. Navegue para a seção Templates.
  4. Escolha o template Next.js desejado.
  5. Conecte sua conta do GitHub.
  6. Escolha um nome para sua aplicação.
  7. Clique em Deploy.

Realizando deploy de um projeto existente usando importação do GitHub

  1. No Console, clique no botão + Create.
  2. Selecione Importar do Github.
  3. Selecione seu repositório.
  4. Escolha um nome para a aplicação.
  5. Selecione o Preset do Next.js.
  6. Insira o comando de instalação:
Terminal window
npm install
  1. Clique em Deploy.

Realizando deploy de um template via Azion CLI

Você pode usar a Azion CLI para realizar o deploy de um template.

  1. No terminal, inicialize o projeto:
Terminal window
  azion init
  1. Dê um nome ao seu projeto ou pressione enter para aceitar a sugestão dada:
Terminal window
? Your application's name:  (black-thor)
  1. Escolha o preset Next.js:
Terminal window
? Choose a preset:  [Use arrows to move, type to filter]
  Angular
  Astro
  Docusaurus
  Eleventy
  Emscripten
  Gatsby
  Hexo
  Hono
  Hugo
  Javascript
  Next.js
  Preact
> Next.js
  ...

  1. Escolha um dos templates disponíveis.

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

Terminal window
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:
Terminal window
  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:

Terminal window
Your Edge Application was built successfully
[Azion] [Server] › ✔  success   Function running on port 0.0.0.0:3000, url: http://localhost:3000
  1. No browser, visite http://localhost:3333/ e você pode ver o seu projeto Angular rodando.

Realizando deploy 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:

Terminal window
cd [your-project-name]
  1. Realize o deploy do projeto:
Terminal window
azion deploy
  1. Aguarde enquanto o projeto é construído e implantado na Azion Web Platform.

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

Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o domínio 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:
Terminal window
   Do you want to deploy your project? (y/N)
  1. Instale as dependências do projeto. Digite y quando a interação solicitar:
Terminal window
  Do you want to install project dependencies? This may be required to deploy your project (y/N)
  1. Aguarde enquanto o projeto é construído e implantado na plataforma da Azion.

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

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

Deploy de um projeto local com Azion CLI

Você pode utilizar o processo abaixo para realizar o deploy de um projeto local, compatível com as frameworks suportadas.

  1. Dentro da pasta de seu projeto existente, use o comando abaixo para vincular o seu projeto a uma edge application:
Terminal window
azion link

  1. Escolha o preset the Next.js.

  2. A CLI vai lhe guiar pelo restante do processo.