# Nextal

import DocButton from '~/components/webkit/DocButton.vue';
import SectionBasicContent from '~/components/webkit/SectionBasicContent.vue';
import Container from '~/components/webkit/Container.vue';

<div class="[&_.flex.flex-col]:!gap-4 [&_.flex.flex-col]:md:!gap-8 [&_.flex.flex-col]:2xl:!gap-16">
  <SectionBasicContent
    titleTag="h2"
    description="Com o template Nextal, você pode lançar um starter Next.js SSR que já vem configurado com Vitest, Tailwind CSS e Hero Icons. Ele segue convenções modernas como Modo Escuro, organização por Atomic Design e imports absolutos, dispensando a configuração inicial para você começar a desenvolver imediatamente. Implantado na Azion, sua aplicação roda em uma arquitetura distribuída para uma entrega rápida e globalmente distribuída."
    buttons={[
      { label: "Implantar template", link: "/pt-br/documentacao/produtos/cli/frameworks/nextal/", outlined: false, icon: "ai ai-azion", iconPos: "left" }
    ]}
  />
</div>

<div style="display: flex; gap: 1rem; align-items: center; flex-direction: row; flex-wrap: wrap;">
  <div style="flex: 1; min-width: 300px;">
    | Item | Detalhes |
    |:----------|:------|
    | Repositório | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/opennextjs/nextal-next-typescript-tailwind) |
    | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
    | Caso de uso | Geral |
  </div>
  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
    <img src="/assets/docs/images/uploads/template-showcase/nextjs/nextal.png" width="400" alt="Nextaltemplate" style="max-width: 100%; height: auto;" />
  </div>
</div>

## Sobre este template

O Nextal é um starter opinativo para [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/), o popular framework React para aplicações web de nível profissional. Ele reúne testes com Vitest, estilização com Tailwind CSS e Hero Icons, além de uma estrutura de pastas em Atomic Design e imports absolutos, oferecendo uma base limpa e escalável. Implantada na Azion, a aplicação SSR é servida por meio de uma arquitetura distribuída para respostas de baixa latência em todo o mundo. Por já incluir testes, estilização e uma estrutura de projeto organizada, o Nextal elimina grande parte da configuração repetitiva de um novo projeto Next.js, permitindo que as equipes se concentrem na lógica de negócio desde o primeiro commit. É uma escolha sólida para sites institucionais, dashboards e aplicações React que precisam de renderização no servidor com bom desempenho global.

## Principais recursos

- Vitest pré-configurado para testes unitários e de componentes
- Tailwind CSS e Hero Icons para estilização rápida e consistente
- Modo Escuro integrado e organização do projeto em Atomic Design
- Imports absolutos e TypeScript para um código mais fácil de manter

Para mais informações sobre a implementação deste template, visite o [guia do template](/pt-br/documentacao/produtos/cli/frameworks/nextal/).