Como fazer deploy de um app React ou Next.js

Deploy de um app React ou Next.js

Como fazer deploy de um app React ou Next.js (com rewrites de SPA) | We.Inc

Escolha o tipo de app e a hospedagem para ver o comando de build, a pasta de saída e o arquivo de rewrite que evita 404 ao recarregar na Vercel, Netlify, Cloudflare e GitHub Pages.

Para fazer deploy de um app React, rode o build de produção e entregue a pasta de saída a uma hospedagem: dist no Vite, out em um export estático do Next.js. Single page apps também precisam de um rewrite que envie caminhos desconhecidos para index.html, senão recarregar um link interno retorna 404. Um app Next.js completo precisa de uma hospedagem que rode Node.js.

Saída do build por tipo de app

A maioria dos deploys de React que dão errado se resume a três coisas: a pasta de saída errada, a falta de um rewrite para as rotas do lado do cliente, ou um recurso do Next.js que precisa de servidor enviado para uma hospedagem estática. Escolha abaixo o tipo de app e a hospedagem para ver a configuração e o arquivo exatos para essa combinação, cada um tirado da documentação da própria hospedagem.

Perguntas frequentes

Por que meu app React mostra 404 quando recarrego uma página?

O roteador vive no navegador, mas ao recarregar o navegador pede ao servidor um arquivo como /about/index.html, que não existe. Um rewrite que retorna index.html para caminhos desconhecidos devolve o controle ao roteador. Cada hospedagem tem sua própria sintaxe para essa regra.

Preciso de um rewrite no Cloudflare Pages?

Não, se o seu build não tiver um 404.html no nível raiz. A documentação da Cloudflare diz que, nesse caso, o Pages trata o projeto como single page app e serve o index da raiz para qualquer caminho que não seja um arquivo real.

Posso fazer deploy de um app Next.js no GitHub Pages?

Só como export estático com output: 'export'. O GitHub Pages serve arquivos e não consegue rodar o servidor do Next.js, então recursos como server actions, cookies, rewrites e renderização sob demanda não ficam disponíveis lá.

Qual é a diferença entre redirect e rewrite?

Um redirect manda o navegador para uma nova URL, o que muda a barra de endereço. Um rewrite serve outro arquivo mantendo a URL pedida, que é o que uma single page app precisa. A Netlify marca um rewrite com o status 200.

Onde ficam as variáveis de ambiente?

Configure-as nas configurações do projeto na hospedagem, não em um arquivo .env commitado. Lembre que variáveis enviadas ao navegador são públicas, então guarde chaves que precisam ficar privadas em um servidor ou em funções serverless.

Passo um: um build de produção limpo

Passo dois: um roteamento que sobrevive ao recarregar

Passo três: um domínio e uma verificação

Regras de rewrite de SPA por hospedagem

Onde fica a regra curinga (segundo a documentação de cada hospedagem, outubro de 2026)

Rewrite da Netlify em netlify.toml

A mesma regra do arquivo _redirects de uma linha. O status 200 mantém o endereço que o visitante pediu.

Workflow do GitHub Actions para um site Vite

Adaptado do workflow do guia de deploy do Vite (que fixa cada action em um commit). Ele faz o build a cada push na main e publica dist. Ative o GitHub Actions como fonte em Settings, depois Pages.

Importe o repositório; a Vercel detecta o Vite. Adicione este arquivo na raiz do projeto para que os links internos carreguem o app.

Comando de build npm run build, diretório de publicação dist. Salve esta linha como public/_redirects para que o Vite a copie para dist.

Conecte o repositório e escolha o preset do Vite. Nenhuma regra é necessária enquanto dist não tiver um 404.html no nível raiz, porque nesse caso o Pages serve o index da raiz para caminhos desconhecidos.

Defina o base com o nome do seu repositório, faça o build com GitHub Actions e publique dist. O GitHub Pages aceita um 404.html personalizado, mas não tem regras de rewrite, então uma alternativa comum é copiar index.html para 404.html depois do build; esses links internos passam a carregar com status 404.

A Vercel faz o build do Next.js diretamente, então aqui o export estático é opcional. Mantenha só se quiser os mesmos arquivos em todo lugar.

Defina o diretório de publicação como out. Cada rota já tem seu próprio arquivo HTML, então nenhum rewrite curinga é necessário.

Use npm run build com o diretório de saída out. O export inclui um 404.html, então o Pages o serve para caminhos inexistentes em vez da página inicial.

O export estático é a única forma de rodar Next.js aqui. Se o site fica sob um caminho de repositório, defina basePath igual a ele.

Importe o repositório e faça o deploy. A Vercel é um dos adaptadores verificados listados na documentação de deploy do Next.js.

A Netlify roda Next.js com sua própria integração, que a documentação do Next.js ainda não lista como adaptador verificado. Consulte a documentação dela para ver se falta algum recurso.

A Cloudflare roda Next.js no Workers com sua própria integração, também ainda não verificada como adaptador. Siga o guia de framework dela em vez do fluxo estático do Pages.

Não é possível. O GitHub Pages só serve arquivos e não consegue rodar next start. Mude para um export estático ou escolha uma hospedagem que rode Node.js.

Vite + React

Export estático do Next.js

App Next.js completo

Vercel

Netlify

Cloudflare Pages

GitHub Pages

Seletor de receita de deploy

O que você criou?

Onde vai rodar?

Todas as combinações de app e hospedagem

Copiar

Comece grátis · Sem cartão de crédito

Relacionados: Guias

Produto

Para quem é

Recursos

Recursos

Empresa

Mapa do site