Astro vs Next.js parece uma disputa entre dois frameworks modernos de JavaScript, mas eles partem de perguntas diferentes. O Astro pergunta quanto da página pode chegar ao navegador como HTML pronto. O Next.js pergunta como montar uma aplicação React que divide o trabalho entre servidor e cliente.

Para uma landing page de campanha, um site de marketing ou a página de vendas de um produto, essa diferença decide quanto JavaScript o visitante baixa, como a equipe publica conteúdo e onde o projeto pode ser hospedado.

O modelo de cada framework

Astro: HTML primeiro, ilhas quando precisa

O Astro é um framework open source, sob licença MIT, pensado para sites de conteúdo. Ele renderiza componentes para HTML e CSS e, por padrão, remove o JavaScript do cliente. Quando uma parte da página precisa de interação, ela vira uma ilha: o componente recebe uma diretiva como client:visible e só aquele trecho carrega script, no momento escolhido.

As ilhas podem ser escritas em React, Vue, Svelte, Preact ou SolidJS, e frameworks diferentes podem conviver na mesma página. O resto continua HTML estático.

O Astro gera sites totalmente estáticos ou com páginas renderizadas sob demanda, por meio de adaptadores para cada plataforma. Desde janeiro de 2026 a empresa por trás do projeto faz parte da Cloudflare, e o framework segue MIT e publicável em várias plataformas. O Astro 7, lançado em 2026, trouxe um compilador reescrito em Rust e passou a usar o Vite 8.

Next.js: aplicação React com App Router e Server Components

O Next.js é um framework React para aplicações web completas. No App Router, estável desde a versão 13.4, layouts e páginas são Server Components por padrão: rodam no servidor, buscam dados e mandam o resultado já renderizado. Componentes que precisam de estado, eventos ou APIs do navegador recebem a diretiva "use client".

No primeiro acesso, o navegador recebe HTML para mostrar a página, o RSC Payload para reconciliar as árvores de componentes e JavaScript para hidratar os Client Components. Nas navegações seguintes, o roteador busca o RSC Payload e troca de rota sem recarregar a página. Essa base é o que torna o Next.js forte em aplicações com muitas telas, sessão de usuário e dados que mudam.

Comparação rápida

Critério Astro Next.js
Ponto de partida site de conteúdo que vira HTML aplicação React com servidor e cliente
JavaScript no navegador zero por padrão, só nas ilhas React, roteador e Client Components hidratados
Componentes de UI .astro, mais React, Vue, Svelte e outros em ilhas React
Conteúdo em Markdown nativo, com coleções e schema MDX via @next/mdx, frontmatter exige plugins
Navegação entre páginas carregamento normal de documento transição no cliente com prefetch
Recursos de servidor páginas sob demanda e endpoints via adaptador Server Actions, Route Handlers, cache e mais
Saída estática modo padrão output: 'export', sem parte dos recursos de servidor
Melhor encaixe landing, site institucional, blog, documentação landing dentro de um produto React, app com login

Quanto JavaScript chega ao navegador

Numa landing page, a maior parte do conteúdo é texto, imagem, depoimento, preço e um botão de ação. Nada disso precisa de JavaScript para aparecer.

No Astro, essa página sai como HTML e CSS. Se você adiciona um formulário com validação ou um seletor de planos interativo, apenas esses componentes levam script. O peso da página cresce com a interação que você coloca, não com o framework.

No Next.js, Server Components reduzem bastante o JavaScript em relação ao React tradicional, e a própria documentação recomenda marcar como "use client" só os componentes interativos. Mesmo assim, a página carrega o runtime do React e o roteador do Next.js para hidratação e navegação. Em uma aplicação, esse custo se paga com transições rápidas e estado compartilhado. Numa landing de uma página que o visitante abre uma vez, vindo de um anúncio, ele pesa sem trazer muito em troca.

Isso não quer dizer que toda landing em Next.js é lenta. Imagens, fontes, scripts de terceiros e animações costumam pesar mais do que o framework. Meça com dados de visitas reais antes de decidir uma migração só por performance.

Conteúdo e fluxo de marketing

Equipes de marketing mudam texto, criam variações de página e publicam posts com frequência. O formato do conteúdo importa.

O Astro trata Markdown e MDX como cidadãos de primeira classe. As coleções de conteúdo organizam posts, depoimentos ou páginas de produto com schema validado, e um campo faltando aparece como erro no build, antes de ir ao ar.

O Next.js também lida com conteúdo, mas pela via de uma aplicação. O suporte a MDX passa pelo pacote @next/mdx, que não lê frontmatter por padrão. Em projetos maiores, o caminho comum é um CMS headless consultado por Server Components.

Se quem edita é uma IA, essa diferença diminui: ela escreve componente React ou arquivo Markdown com a mesma facilidade. O que continua contando é a estrutura que o projeto impõe. Um schema que acusa campo faltando no build é uma proteção útil quando o agente publica sozinho.

Quando a landing faz parte do produto

Aqui o Next.js costuma ganhar.

Se a sua landing vive no mesmo repositório da aplicação, compartilha componentes de design, precisa saber se o visitante está logado ou leva direto para um fluxo de cadastro dentro do app, manter tudo em Next.js simplifica. Uma base de código, um sistema de componentes, um deploy.

Outros sinais a favor do Next.js:

  • a página mostra preço, estoque ou conteúdo personalizado por usuário a cada visita;
  • o time já domina React e tem o Next.js como padrão em outros projetos;
  • a landing usa Server Actions, Route Handlers ou outras APIs do servidor;
  • a experiência depende de transições entre várias telas, como um configurador de produto.

Separar a landing do produto também tem custo: dois projetos, dois deploys e cuidado para o visual não divergir.

Hospedagem

Um site Astro estático pode ser publicado em qualquer hospedagem de arquivos. Com páginas sob demanda, o adaptador define onde ele roda: Node, Cloudflare, Netlify, Vercel e outros.

O Next.js com todos os recursos precisa de um servidor Node ou de uma plataforma que suporte o framework. Existe a exportação estática com output: 'export', que gera um HTML por rota e pode ir para qualquer servidor de arquivos. Nesse modo, recursos como Server Actions, redirects e headers do next.config, cookies, ISR e otimização de imagem com o loader padrão deixam de funcionar. Para uma landing simples, a exportação estática resolve. Para usar o que o Next.js tem de melhor, você precisa de runtime.

Recomendação prática

Escolha Astro quando:

  • a landing é independente do produto ou o produto não é uma aplicação React;
  • o conteúdo é majoritariamente estático, com poucas partes interativas;
  • você quer páginas leves em celular sem otimizar JavaScript manualmente;
  • a equipe publica muitas variações de campanha, posts ou páginas de serviço;
  • a hospedagem precisa ser simples e barata.

Escolha Next.js quando:

  • a landing é parte de uma aplicação Next.js e compartilha componentes e sessão;
  • a página depende de dados por usuário a cada visita;
  • o time já trabalha com React e Next.js e quer um único padrão;
  • a página é, na prática, a primeira tela de um app.

Se não tem certeza, comece pela pergunta mais simples: essa página precisa saber quem é o visitante? Se a resposta for não, o Astro provavelmente entrega o mesmo resultado com menos peso. Para entender o modelo do Astro com mais detalhes, veja o que é o Astro e para que tipo de site ele serve.

Onde o Site no Ar entra

No Site no Ar, cada tipo de site usa uma tecnologia definida. A Landing Page é um projeto Astro, disponível em todos os planos. A Aplicação Web, para login, formulários com lógica no servidor e chatbots, usa TanStack Start, nos planos Pro e Diamante. Projetos Next.js não são publicados pelo Site no Ar. A tabela completa está em tipos de site e arquivos.

O fluxo começa na IA que você já usa, como Claude, ChatGPT, Codex, Cursor ou Gemini, conectada ao Site no Ar. Você pede a landing na conversa, a IA cria e edita os arquivos Astro, confere a pré-visualização e publica. O link volta na mesma conversa, com SSL, histórico de versões e a opção de conectar um domínio próprio.

Para não partir de uma página em branco, os templates Astro de landing page trazem páginas de oferta, venda de curso, agendamento e proposta comercial que a IA adapta ao seu conteúdo. Os planos começam em R$ 10/mês, sem plano gratuito, e estão em preços.