Hospedagem de export estático do Next.js

O Next.js consegue gerar um site que não precisa de servidor: defina output: "export" e o next build escreve cada página como HTML em out/. O Lobsite hospeda essa pasta. Rode npm run build, depois npx lobsite, e o site fica no ar num endereço *.lobsite.app com HTTPS. Para deixar claro desde o início: esta página fala de exports estáticos. Renderização no servidor, rotas de API e middleware precisam de uma hospedagem Node.js, como a Vercel.

Como funciona

1. Ative o export estático no next.config.js com output: "export" (veja abaixo) e rode npm run build. O site vai para out/.
2. Rode npx lobsite no projeto. Ele publica out/, não public/ nem .next/. O primeiro deploy não precisa de conta e dura 6 horas.
3. Mantenha com o link de resgate, numa conta gratuita. Depois disso, cada npm run build && npx lobsite atualiza o mesmo endereço.

next.config.js para um export estático

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  images: { unoptimized: true },
};

module.exports = nextConfig;

• output: "export" faz o next build escrever out/. O antigo comando next export deixou de existir no Next.js 14; esta configuração o substituiu.
• images: { unoptimized: true } é necessário se você usa next/image: o loader padrão redimensiona imagens num servidor a cada requisição. Com isso, as imagens são servidas como estão; redimensione antes do build ou use um loader próprio.
• trailingSlash pode ficar desligado. As páginas são escritas como about.html e o Lobsite as serve em /about.

O que um export estático não faz

A documentação do Next.js lista os recursos que precisam de servidor. Os que mais aparecem:

• Rotas de API e Route Handlers que não sejam GET estáticos. Envie formulários para /_lobsite/forms/contact; veja formulários.
• redirects, rewrites e headers no next.config. Leve redirecionamentos e cabeçalhos para o lobsite.toml, onde valem para toda requisição; o Gerador de redirecionamentos escreve as regras.
• Middleware, Server Actions, ISR e cookies() ou headers() nas páginas.
• Rotas dinâmicas sem generateStaticParams: toda página precisa ser conhecida no build.

Se o seu app depende disso, ele não é um site estático, e uma hospedagem que roda Next.js num servidor é a escolha certa.

Hospedagens para Next.js comparadas

A Vercel faz o Next.js e roda tudo dele. Para um site institucional, um blog ou uma documentação gerados como export estático, o Lobsite é a hospedagem mais simples: um comando, só arquivos alterados sobem, uma URL de prévia para cada deploy.

Perguntas frequentes

Posso hospedar aqui um app Next.js com renderização no servidor?

Não. O Lobsite serve arquivos, então só um export estático funciona. Se as páginas usam getServerSideProps, Server Actions ou renderização dinâmica, hospede onde o Next.js roda num servidor.

Por que minhas imagens do next/image quebram depois do export?

O loader de imagens padrão precisa de servidor. Adicione images: { unoptimized: true } ao next.config.js, ou defina um loader próprio apontando para um CDN de imagens, e faça o build de novo.

Minha página 404 do Next.js funciona?

Sim. O next build escreve 404.html a partir da sua página not-found (App Router) ou de pages/404 (Pages Router), e o Lobsite a serve para qualquer endereço que não exista.

Posso usar o App Router com um export estático?

Sim. Server Components são renderizados no build; componentes de cliente rodam no navegador como sempre. Só ficam de fora os recursos que precisam de uma requisição em tempo de execução.