O Next.js pode sair de duas maneiras muito diferentes, e escolher a errada está na origem de quase todos os problemas de publicação. A resposta curta: se o seu site não precisa de código a rodar no servidor a cada visita, faça uma exportação estática e publique-a como arquivos, o que cabe em qualquer hospedagem. Se precisa (páginas geradas no servidor, rotas de API, middleware), precisa de um processo Node sempre ligado: cabe no «Setup Node.js App» quando é simples, e fica melhor num VPS.
As saídas possíveis
| Modo |
O que produz |
Onde corre |
O que se perde |
| Exportação estática |
Uma pasta de arquivos HTML, CSS e JavaScript (por padrão chama-se out). |
Em qualquer hospedagem, como um site normal, na pasta pública do domínio. |
Rotas de API, renderização no servidor e middleware. Segundo a documentação do Next.js, as imagens do next/image precisam de unoptimized: true. |
Servidor Node (next start) |
Um processo Node que responde a cada pedido. |
No «Setup Node.js App» do cPanel, ou num VPS com PM2 e nginx. |
Gasta memória o tempo todo e fica sujeito aos limites da conta. |
Modo standalone |
Uma pasta .next/standalone com um server.js e só o que é preciso. |
Como o servidor Node; é a forma mais leve de copiar para um VPS ou para uma imagem Docker. |
Tem de copiar à mão as pastas public e .next/static, segundo a documentação. |
Exportação estática, passo a passo
| 1 |
Peça a exportação. No next.config.js defina output: 'export'. Se usa imagens do Next, acrescente também images: { unoptimized: true }.
|
|
| 2 |
Compile no seu computador: npm run buildNo fim aparece a pasta out com o site pronto.
|
|
Servidor Node no cPanel
| 1 |
Compile no seu computador e envie só o resultado: as pastas .next e public, o package.json, o package-lock.json e o arquivo de configuração. Não envie o node_modules. Compilar no servidor gasta memória e milhares de arquivos: os limites de que ninguém fala.
|
|
| 2 |
Crie um arquivo de inicie (por exemplo server.js) na raiz da aplicação, que inicia o Next e ouve na porta que o Passenger lhe der:const { createServer } = require("http");
const next = require("next");
const app = next({ dev: false });
const handle = app.getRequestHandler();
app.prepare().then(() => {
createServer((req, res) => handle(req, res)).listen(process.env.PORT || 3000);
});
|
|
| 3 |
Crie a aplicação em «Setup Node.js App»: a versão do Node que o seu Next pede, o modo production, a raiz, o endereço e o arquivo de início. Use «Run NPM Install» para instalar as dependências. O passo a passo geral está em pôr uma aplicação Node.js a rodar.
|
|
| 4 |
Defina as variáveis na tela da aplicação e reinicie. Atenção: as que começam por NEXT_PUBLIC_ ficam gravadas no código durante a compilação, por isso mudá-las exige compilar de novo.
|
|
|
Na dúvida, comece pela exportação estática. É a mais barata de manter e a que não deixa nada a rodar que possa quebrar. Só passe ao servidor Node quando uma página precisar mesmo de dados do servidor a cada pedido.
|
PRODUTO RECOMENDADO Alojamento de sites com cPanel Domínio e SSL incluídos, cópias diárias e o painel que já conhece. desde R$ 36,30/mês (plano de 3 anos, com cupom) Ver planos |
Angola
Brasil
Kenya
Moçambique
Nigeria
Portugal
South Africa
United Kingdom
United States
International
