Export estático de Next.js

Publique
sites Next.js estáticos

Exporte seu app Next.js para HTML e assets estáticos, envie a pasta out e publique globalmente sem rodar um servidor Node.js.

Ver guia de configuração
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
// Optional for static deployments
images: { unoptimized: true },
}

module.exports = nextConfig
Export estático ativado

Matriz de suporte para export estático

Antes de enviar out, confirme que o app cabe no modelo de export estático.

Funciona bem

  • Rotas estáticas geradas em build
  • Páginas do App Router que podem renderizar estaticamente
  • Pages Router com getStaticProps / getStaticPaths
  • Busca de dados no cliente depois da hidratação
  • next/link, imports dinâmicos, CSS Modules e assets estáticos

Precisa de outro runtime

  • API routes e route handlers que exigem execução no servidor
  • Middleware, rewrites, redirects e headers personalizados
  • getServerSideProps e renderização por requisição
  • Incremental Static Regeneration
  • Otimização padrão do next/image sem estratégia estática própria

Use Next.js quando quiser o framework, não o servidor

Mantenha o framework, dispense o servidor

O export estático do Next.js permite manter rotas por arquivo, layouts, metadata, renderização em build, suporte a CSS e React no cliente quando necessário.

A saída ainda é só arquivo. Isso funciona bem para sites de marketing, docs, portfólios, páginas de produto, hubs de conteúdo e outras páginas preparadas em tempo de build.

Rápido como arquivo estático

HTML pré-renderizado pode ser cacheado agressivamente e servido diretamente sem esperar um servidor de renderização.

Menos operação

Sem runtime Node, há menos peças móveis, artefatos de deploy mais simples e menos diferença entre o build local e o site publicado.

Limite de runtime claro

Se a página precisa de código de servidor, ela não deve ser forçada em export estático. Se pode ser gerada antes, a pasta out é um artefato limpo para publicar.

Bloqueios comuns do export estático

Blocker 01

O build falha por recursos de servidor

Remova APIs de tempo de requisição da rota exportada, mova para um backend separado ou publique essa parte em uma plataforma com servidor.

Blocker 02

Imagens funcionam no dev e falham depois do export

O otimizador padrão do next/image espera um servidor. Use images.unoptimized, um loader próprio ou imagens estáticas normais.

Blocker 03

Rotas dinâmicas estão faltando

Gere a lista de rotas em build com generateStaticParams no App Router ou getStaticPaths no Pages Router.

Blocker 04

Redirects ou rewrites não aplicam

Redirects e rewrites do Next.js não fazem parte do export estático. Use estrutura de páginas estáticas, navegação no cliente ou redirects da plataforma quando disponíveis.

Checklist de export estático do Next.js

01

Defina output: 'export'

Diga ao Next.js para emitir HTML estático no build em vez de esperar next start ou runtime Node hospedado.

output: 'export'
02

Faça o build e verifique /out

Rode o build de produção e confirme que a pasta out contém páginas renderizadas, assets, página 404 e arquivos estáticos que você pretende publicar.

npm run build
03

Envie e teste rotas

Envie a pasta out e valide caminhos aninhados, assets estáticos e imagens sem otimização no site publicado.

FAQ de publicação Next.js

Por que o componente Image do Next.js falha depois do export?

A pipeline padrão de otimização de imagem espera um servidor. Para export estático, defina images.unoptimized como true em next.config.js.

API routes ou getServerSideProps funcionam aqui?

Não. O export estático remove recursos de runtime no servidor, como API routes, middleware e getServerSideProps. Mova essa lógica para backend ou serverless separado.

Posso usar App Router?

Sim, desde que a rota possa ser renderizada estaticamente e não dependa de APIs dinâmicas de servidor, como headers ou cookies.

Como devo lidar com conteúdo dinâmico?

Busque em build quando possível ou carregue no cliente depois da hidratação. Export estático funciona melhor quando o HTML pode ser preparado antes.

Devo enviar .next ou out?

Envie out para output: 'export'. A pasta .next é interna ao build do Next.js e não é o artefato estático que você quer publicar.

Isso substitui hospedagem Next.js da Vercel?

É uma opção para exports estáticos, não para todo app Next.js. Se você depende de SSR, middleware, ISR, server actions ou API routes, precisa de runtime que suporte esses recursos.