Como desenvolver com Nextal

O Nextal é um starter opinativo para Next.js que inclui TypeScript, Tailwind CSS e Hero Icons prontos para uso. Ele segue convenções modernas como Modo Escuro, organização de pastas em Atomic Design e imports absolutos, oferecendo uma base limpa e escalável para construir aplicações SSR de nível profissional.

Saiba mais sobre o Nextal.

Pré-requisitos

Antes de começar, você deve ter:

• Uma conta na plataforma da Azion com o produto Functions habilitado.
• A versão mais recente da Azion CLI instalada.
• Um personal token da Azion válido configurado no terminal.
• Um editor de código.
• Acesso ao terminal.
• Node.js ≥ 18 instalado.

Inicializar um projeto Nextal

1. No terminal, inicialize o projeto:

  azion init

2. Dê um nome ao seu projeto ou pressione enter para aceitar a sugestão dada:

? Your application's name:

3. Escolha o preset OpenNextJS:

? 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

4. Escolha o template Nextal - (NextJS, Typescript, Tailwind):

? 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

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

• Se você optou por executar um servidor de desenvolvimento local.
• Se você optou por não executar um servidor de desenvolvimento local.

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

2. No navegador, vá para http://localhost:3333/ e você verá o seu projeto Nextal em execução.

Implantação do projeto

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

1. Pare a execução no terminal com control + c.
2. Acesse a pasta do projeto:

cd [nome-do-seu-projeto]

3. Implante o projeto:

azion deploy

4. Aguarde enquanto o projeto é construído e implantado na Azion Web Platform.

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

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 Nextal na Azion Web Platform.

1. Digite y para a seguinte interação, indicando que deseja implantar o projeto:

Do you want to deploy your project?

2. 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)

3. Aguarde enquanto o projeto é construído e implantado na Azion Web Platform.

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

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

Para mais informações sobre a compatibilidade do Next.js na Azion Web Platform, acesse a página de compatibilidade de frameworks Next.js.